首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在Angular 2中的构造函数外部设置一个值

在Angular 2中,可以在构造函数外部设置一个值的方法是通过在组件类中定义一个公共属性,并在构造函数外部给该属性赋值。

首先,在组件类中定义一个公共属性,例如:

代码语言:typescript
复制
export class MyComponent {
  public myValue: string;
  
  constructor() { }
}

然后,在构造函数外部给该属性赋值,例如:

代码语言:typescript
复制
export class MyComponent {
  public myValue: string;
  
  constructor() {
    // 构造函数内部可以使用this.myValue访问到属性值
  }
}

const myComponent = new MyComponent();
myComponent.myValue = 'Hello World';

这样,在构造函数内部就可以使用this.myValue来访问到在构造函数外部设置的值。

在Angular 2中,构造函数外部设置一个值的应用场景包括但不限于:

  1. 从服务端获取数据后,将数据赋值给组件的属性,以便在模板中显示。
  2. 在组件初始化之前,通过其他逻辑计算得到一个值,并将该值赋值给组件的属性,以便在组件初始化时使用。

对于腾讯云相关产品和产品介绍链接地址,由于要求不能提及具体品牌商,无法提供相关链接。但腾讯云提供了丰富的云计算服务,包括云服务器、云数据库、云存储等,可以根据具体需求选择适合的产品。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

【C 语言】指针间接赋值 ( 直接修改 和 间接修改 指针变量 | 函数中 间接修改 指针变量 | 函数中 间接修改 外部变量 原理 )

文章目录 一、直接修改 和 间接修改 指针变量 二、函数中 间接修改 指针变量 三、函数中 间接修改 外部变量 原理 一、直接修改 和 间接修改 指针变量 ---- 直接修改 指针变量... , 就是为其赋值一个地址 , 使用 & 取地址符 , 将变量地址赋值给指针变量 , 或者使用 malloc 函数分配内存赋值给 指针变量 ; // 将变量地址赋值给一级指针 p...间接修改 指针变量 ---- 函数 中 间接修改 指针变量 , 将 指向一级指针 二级指针 变量 , 传递到 函数形参 中 , 函数中 , 使用 * 符号 , 修改 二级指针...一级指针 变量 , 这个传入 一级指针 变量 , 其 生命周期 到函数结尾就结束了 , 跟函 数外部 一级指针 变量 没有任何关系 ; 如果 要修改 函数外部 变量 , 必须传入 指向该变量...三、函数中 间接修改 外部变量 原理 ---- 如果要 修改 一级指针 , 必须 传入 指向 一级指针 二级指针 变量 才可以 , 传入一级指针变量 , 不能修改一级指针变量值 ; 这是因为

21.2K11

AngularDart 4.0 高级-生命周期钩子 顶

生命周期序列 通过调用其构造函数创建组件/指令后,Angular特定时刻按以下顺序调用生命周期钩子方法: 钩子 作用和时机 ngOnChanges Angular(重新)设置数据绑定输入属性时响应。...构造函数本身不是一个Angular钩子。 日志确认输入属性(在这种情况下name属性)构造时没有分配。...OnInit 使用ngOnInit有两个主要原因: 施工后不久执行复杂初始化 Angular设置输入属性后设置组件 有经验开发人员同意组件应该便于构建且安全。...Angular团队负责人Misko Hevery解释了为什么您应该避免使用复杂构造函数逻辑。 不要在组件构造函数中获取数据。您不应该担心当在测试下创建或决定显示之前时新组件会尝试联系远程服务器。...构造函数不应仅仅将初始局部变量设置为简单。 ngOnInit是组件获取其初始数据好地方。 教程和HTTP章节显示了如何。 还要记住,指令数据绑定输入属性构建之后才会设置

6.2K10
  • Angular入门,开发环境搭建,使用Angular CLI创建你一个Angular项目

    Angular生命周期函数: 什么是生命周期函数?...生命周期钩子:https://angular.cn/guide/lifecycle-hooks 当 Angular 使用构造函数新建一个组件或指令后,就会按下面的顺序特定时刻调用这些生命周期钩子方法:...注意:constructor 构造函数(依赖注入,起到对应局部变量值初始化作用): 除了使用简单对局部变量进行初始化之外,什么都不应该做!!...该方法接受当前和上一属性 SimpleChanges 对象 ngOnInit() 之前以及所绑定一个或多个输入属性发生变化时都会调用。...ngOnInit() Angular 第一次显示数据绑定和设置指令/组件输入属性之后,初始化指令/组件。 第一轮 ngOnChanges() 完成之后调用,只调用一次。

    2.8K20

    angularjs 指令详解

    一个代表外部HTML文件路径字符串; 一个可以接受两个参数函数,参数为tElement和tAttrs,并返回一个外部HTML文件路径字符串。...当设置为字符串时,会以字符串为名字,来查找注册应用中控制器构造函数. angular.module('myApp', []) .directive('myDirective', function...) { restrict: 'A', replace: true, templateUrl: 'test.html', controller: 'SomeController' })  可以指令内部通过匿名构造函数方式来定义一个内联控制器...3.当我们将scope设置为{}时,意味着我们创建一个与父作用域隔离作用域,这使我们不知道外部环境情况下,就可以正常工作,不依赖外部环境。...父级作用域绑定 通过&符号可以对父级作用域进行绑定,以便在其中运行函数。意味着对这个进行设置时会生成一个指向父级作用域包装函数

    2.2K40

    AngularDart4.0 指南- 依赖注入 顶

    您可以通过指定具有依赖类型构造函数参数来告诉Angular组件构造函数中注入依赖项。 这里是HeroListComponent构造函数,要求注入HeroService。... getHeroes() => mockHeroes; } 构造函数要求注入Logger实例,并将其存储一个名为logger专用字段中。...)] 第一个Provider构造函数参数是作为定位依赖项和注册提供者标记。...log(someMessage); } 当使用@Optional()时,您代码必须考虑空。 如果您没有注入器某处注册logger,注入器会将logger设置为空。...在这个例子中,Angular将组件注入器注入到组件构造函数中。 该组件然后ngOnInit()中向注入注入器询问它想要服务。 请注意,服务本身不会被注入到组件中。

    5.7K20

    angularJS学习之路(十七)---自定义指令

    2.factory_function 函数  在这个函数里面  一般返回一个对象,函数里面定义了这个指令全部行为, angular.module('myApp',[]) .directive('myDirective...当一个给定设置为  一个字符串,布尔,数字,数组或者对象时,我们把这个键称为属性,当把键设置函数时,我们把它叫做方法 可能选项如下: angular.module('myApp',[])...这里面的难点在于  模板 中作用域问题 templateUrl:String,字符串【也可以是函数】 字符串:代表外部HTML文件路径字符串 一般通过ajax 请求HTML模板文件 【函数一个可以接收两个参数函数...:部署之前对HTML模板进行缓存   这是一个非常好选择  放在一个定义模板javascript文件中 replace:Boolean or String,布尔型 如果设置了这个参数,必须是true...or function(scope,element,attrs,transclude,otherInjectables){}, 字符串或者函数 字符串:当设置为字符串时 会以字符串为名字来查找注册应用中控制器构造函数

    69810

    Angular实战之使用NG-ZORRO创建一个企业级中后台框架(进阶篇)

    让你快熟构建一个属于自己NG-ZORRO后台管理框架,注意我们前端代码编写全部都是VS Code上面编写。 Angular项目目录介绍(重要): ?...生命周期钩子详解:https://angular.cn/guide/lifecycle-hooks 当 Angular 使用构造函数新建一个组件或指令后,就会按下面的顺序特定时刻调用这些生命周期钩子方法...: 注意:constructor 构造函数(依赖注入,起到对应局部变量值初始化作用): 除了使用简单对局部变量进行初始化之外,什么都不应该做!!!...该方法接受当前和上一属性 SimpleChanges 对象 ngOnInit() 之前以及所绑定一个或多个输入属性发生变化时都会调用。...ngOnInit() Angular 第一次显示数据绑定和设置指令/组件输入属性之后,初始化指令/组件。 第一轮 ngOnChanges() 完成之后调用,只调用一次。

    4K20

    AngularJSdigest循环和$apply

    $watch列表 angular跟踪变化,是通过给watch列表添加一个监控函数做到,需要注意是所有绑定给同一watch列表添加一个监控函数做到,需要注意是所有绑定给同一scope对象UI元素...三、页面中$digest循环 (1)angular设置一个隐式监控器,将输入字段绑定为当前...循环之前,会触发该(ng-model)上运行验证和格式化操作; (5)由于digest循环中值发生了变化,angular需要再次运行这一循环以确定它没有改变作用域对象上其他。...apply()函数可以从angular框架外部让表达式angular上下文内部执行。...当手动处理事件,使用第三框架(比如jquery)或者调用setTimeout都可以使用apply()函数可以从angular框架外部让表达式angular上下文内部执行。

    3.2K41

    再谈angularJS数据绑定机制及背后原理—angularJS常见问题总结

    Angular scope 模型上设置一个 监听队列,用来监听数据变化并更新 view 。    ...当你写下表达式如{{ val }}时,AngularJS幕后会为你scope模型上设置一个watcher(表达式将被 Angular 编译成一个监视函数),它用来在数据发生变化时候更新view。...通常写代码时我们无需主动调用 $apply 或 $digest 是因为 angular外部对我们回调函数做了包装。...通常写代码时我们无需主动调用 $apply 或 $digest 是因为 angular外部对我们回调函数做了包装。...$compile,Angular中即“编译”服务,它涉及到Angular应用“编译”和“链接”两个阶段,根据从DOM树遍历Angular根节点(ng-app)和已构造完毕 \$rootScope

    7.8K40

    Angular&TypeScript

    (达内教育学习笔记)仅供学习交流 Angular-TypeScript Angular&TypeScriptTS简介TS扩展特性:访问修饰符特殊用法面向对象编程-class和interface...: TS是强类型语言—js是弱类型语言 强类型语言特点:变量,形参,函数都要声明类型 uname:string f1(n1:number):boolean{ return ture } 常用数据类型关键字...公共成员本类以及外部使用 提示:一般,class内属性不应该让外部随便访问,通常设置为private,方法一般允许被访问为public。...访问修饰符特殊用法 下述两种写法作用相同: 第一种: class Student{ private sname:string = '' //构造方法 constructor...装饰器使用 @expression这种形式,expression求值后必须为一个函数,它会在运行时被调用,被装饰声明信息做为参数传入。

    77730

    Angular12个经典问题,看看你能答对几个?(文末附带Angular测试)

    Angular提供了一组生命周期hooks(特殊事件),可以被分接到生命周期中,并在需要时执行操作。构造函数会在所有生命周期事件之前执行。每个接口都有一个前缀为nghook方法。...ngOnChanges:当Angular设置其接收当前和上一个对象数据绑定属性时响应。 ngOnInit:一个ngOnChange触发器之后,初始化组件/指令。...这通常用在setter中,当类中被更改完成时。 可以通过模块任何一个组件,使用订阅方法来实现事件发射订阅。...要在Visual Studio代码中设置codelyzer,我们可以文件 - >选项 - >用户设置中添加tslint规则路径。...Observable类似于(许多语言中)Stream,当每个事件调用回调函数时,允许传递零个或多个事件。

    17.3K80

    AngularJS入门心得4——漫谈指令scope

    my-dialog.html';     一个可以接受两个参数函数,参数为tElement和tAttrs并返回一个外部HTML文件路径字符串,如templateUrl: function (elem...默认是false。指令内部可以访问外部指令作用域,并且模板也可以访问外部作用域对象。为了将作用域传递进去,scope参数必须通过{}或true设置成隔离作用域。...这是一个最干净情况,index.html中{{name}}到控制器Controller中读取为“Tobias”。 2.    ...这里添加了link参数,最终显示结果是“Check out the contents, Jeff”,这是因为Angular编译器complie后返回一个链接函数,可以看出是执行在Controller...即指令直接共享外部控制器scope,此时directive中scope就和控制器紧密相关,所以此时,scope.name指令link中被重新赋值,这时候控制器和指令中name都被更新为Jeff

    1.9K60

    Angular专题】 (3)装饰器decorator,一块语法糖

    __testable);//false 另一方面,我们可以使用工厂函数方法生成一个可接收附加参数装饰器,借助高阶函数思路不难理解,例如Angular中常见这种形式: //Angular组件定义...它接收如下三个参数: 1.静态成员时参数是类构造函数,实例成员时传入类原型对象。...,因为目前没有办法定义一个原型对象成员时描述一个实例属性,也无法监视属性初始化方法。...2.5 参数装饰器 参数装饰器一般用于装饰参数,构造函数或方法声明中装饰形参。 它在运行时被当做函数调用,传入下列3个参数: 1.静态成员时接收构造函数,实例成员时接收原型对象。...,将相关信息存储到一个外部数组中,可以看出参数装饰器并*未对参数本身做出什么修改。

    1.2K30

    Angularjs基础(三)

    $rootScope可作用域整个应用中,是各个controller中scope桥梁。用rootscope定义,可以各个controller中使用。     ...控制器时JavaScript对象,由标准JavaScript对象构造函数 创建。         ...应用程序内运行。           ng-controller = "myCtrl" 属性是一个Angular 指令。用于定义一个控制器。           ...AngularJS 使用$scope是一个应用像(属于应用变量和函数)           控制器$scope(相当于作用域,控制范围)用来保存AngularJS Mode(模型)对象。           ...    大型应用程序中,通常是把控制器存储在外部文件中。

    3.1K50

    AngularDart4.0 英雄之旅-教程-06服务 顶

    如果您更改HeroService构造函数,则必须查找并更新您创建服务每个位置。 多个地方修补代码是容易出错,并增加了测试负担。 每次使用新建时都会创建一个服务。...注入HeroService 而不是使用新表达式,添加这些行: 添加一个私人HeroService属性。 添加一个初始化私有属性构造函数。 将HeroService添加到组件提供程序元数据。..._heroService);  构造函数除了设置_heroService属性外什么也不做。 _heroServiceHeroService类型将构造函数参数标识为HeroService注入点。...现在Angular知道创建一个AppComponent时要提供一个HeroService实例。 依赖注入页面阅读更多关于依赖注入内容。...您可能会试图构造函数中调用getHeroes()方法,但构造函数不应包含复杂逻辑,特别是调用服务器构造函数(如数据访问方法)。 构造函数用于简单初始化,如将构造函数参数连接到属性。

    2.9K10

    前端面试题angular_Vue前端面试题

    factory:把 service 方法和数据放在一个对象里,并返回这个对象 service:通过构造函数方式创建 service,返回一个实例化对象 provider:创建一个可通过 config...AngularJSscope变量中使用脏检查来实现了数据双向绑定,并且可以通过scope.watch来监听变化触发回调; angular中使用是脏检查机制,angular中每次你绑定一些东西到你...复杂应用中,也可以为实体建立对应构造函数,比如硬盘(Disk)模块,可能有列表、新建、详情这样几个视图,并分别对应有 controller,那么可以建一个 Disk 构造函数,里面完成数据增删改查和验证操作...scope中,@,=,&进行绑定时分别表示 @获取一个设置字符串,它可以自己设置也可以使用{ {yourModel}}进行绑定; = 双向绑定,绑定scope上一些属性; &用于执行父级...scope上一些表达式,常见我们设置一些需要执行函数 15、apply()和 digest()区别 安全性:apply()可以接收一个参数作为function(),这个 function 会被包装到一个

    14.1K20

    Angular--Module使用

    模块Module Angular 应用基本构造块是NgModule, 它为组件提供了编译上下文环境。 Angular 应用就是由一组NgModule定义。...一个Angular应用至少有一个用于启动根模块(root module), 根模块通常命名为AppModule,并位于一个名叫 app.module.ts 文件中。...@NgModule() 装饰器是一个函数,参数是一个元数据对象,元数据对象属性用于描述这个模块。...(你也可以组件级别指定服务提供商,这通常是首选方式。) bootstrap —— 应用主视图,称为根组件。它是应用中所有其它视图宿主。只有根模块才应该设置这个 bootstrap 属性。...它会标出该模块自己组件、指令和管道(declarations),通过 exports 属性公开其中一部分,以便外部组件使用它们。

    4.9K40
    领券