angular2组件生命周期
Angular2是一种流行的前端开发框架，它采用组件化的方式构建用户界面。组件生命周期是指组件在创建、渲染和销毁过程中经历的一系列阶段。下面是Angular2组件生命周期的详细解释：
- ngOnChanges：当组件的输入属性发生变化时调用。可以通过实现OnChanges接口来监听输入属性的变化，并在变化发生时执行相应的逻辑操作。
- ngOnInit：在组件初始化时调用。通常用于执行一些初始化操作，比如获取数据、订阅事件等。
- ngDoCheck：在每个变更检测周期中调用。可以用于检测和响应组件内部的变化，比如手动检测输入属性的变化。
- ngAfterContentInit：在组件内容初始化之后调用。用于执行一些需要在组件内容初始化完成后进行的操作。
- ngAfterContentChecked：在每个变更检测周期中调用，用于检测和响应组件内容的变化。
- ngAfterViewInit：在组件视图初始化之后调用。通常用于执行一些需要在组件视图初始化完成后进行的操作。
- ngAfterViewChecked：在每个变更检测周期中调用，用于检测和响应组件视图的变化。
- ngOnDestroy：在组件销毁之前调用。通常用于执行一些清理操作，比如取消订阅、释放资源等。
Angular2组件生命周期的理解对于开发人员来说非常重要，可以帮助他们在适当的时机执行相应的操作，提高应用的性能和用户体验。
关于Angular2组件生命周期的更多信息和示例代码，可以参考腾讯云的Angular2开发文档：https://cloud.tencent.com/document/product/1007/31392
相关·内容
有没有办法监听@Input的变化？ 在下面的示例中，我希望在'inputData‘值发生更改时得到通知。 @Input() inputData: InputData;
浏览 39提问于2017-01-19得票数 17
回答已采纳
我有以下内容：
export class AddressListComponent implements AfterViewInit{
@Input() districts: District[] = [];
constructor() { }
ngAfterViewInit() {
console.log(this.districts); } }
因此，它将区域记录为空数组，但我将其作为输入非空数组发送，它很好地显示了这个html：
<a *ngFor = "let district of districts; let i = index
浏览 7提问于2017-07-03得票数 6
回答已采纳
如图所示，节点不断增加。我有很多ngFor循环，我目前没有使用异步管道-这会是根本原因吗？
ngOnDestroy在切换时触发。
浏览 13提问于2016-09-01得票数 2
回答已采纳
11回答
如何扩展/继承组件？
、、、
我想为Angular 2中已经部署的一些组件创建扩展，而不必几乎完全重写它们，因为基础组件可能会发生更改，并希望这些更改也反映在其派生组件中。
我创建了这个简单的例子，试图更好地解释我的问题：
使用以下基本组件app/base-panel.component.ts
import {Component, Input} from 'angular2/core';
@Component({
selector: 'base-panel',
template: '<div class="panel" [style.backg
浏览 172提问于2016-04-07得票数 185
我正在尝试构建一个ionic2应用程序。我想在检测到ibeacon时向用户发送通知。它在angularjs中使用了这段代码。我如何像下面的代码一样使用angular2来做这件事？
<div class="row" ng-controller="Example1Controller" ng-init="add()">
浏览 5提问于2017-03-28得票数 0
1回答
我有一个问题，帮助解决我有一个带有模板的组件
ul(slider)
li(*ngFor="let car of getRecentCars()")
car-poster(bcg="{{car.recentBackgroundUrl}}", image="{{car.indexImage}}")
和指令滑块
@Directive({
selector: '[slider]'
})
export class sliderDirective{
private el: HTMLElement;
浏览 3提问于2016-07-20得票数 1
我在angular2应用程序中创建了两个简单的组件，名为IndexPageComponent和DetailPageComponent：
IndexPageComponent
import { Component } from 'angular2/core';
@Component({
selector: 'indexpage',
template: `
<div data-page="index" class="page">
</div>
`
})
export de
浏览 4提问于2016-11-03得票数 0
回答已采纳
我正在使用以下代码来自angular.io网站。因为他们被搜索到可观察到。
import {Observable} from 'rxjs/Observable';
import {Subject} from 'rxjs/Subject';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/
浏览 6提问于2017-08-31得票数 1
回答已采纳
我有一个非常基本的angular2 web应用程序。我想知道正确的位置/钩子，在哪里可以添加代码来编辑DOM。
当我尝试将它放置在ngAfterViewInit中时，我看到以下错误
ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked.
我发现唯一能让代码在超时中包装的方法是这样的
setTimeout(_ => {
.... code comes here ...
})
这似乎不是正确的方法。有什么想法吗？
组件JS代码
expo
浏览 3提问于2017-10-02得票数 2
我有一个Angular2组件，它有一个模板，它需要一个JavaScript调用来加载它的html组件Ex。Facebook，Google和一些定制脚本。
脚本已经加载到index.html中，我只需要调用它们来更新它的内容。
当视图再次更改时，如何在angular2中调用javascript方法。
代码示例；
myJavaScript.js
loadData(){
...
}
$(document).load(loadData());
现在，每当路由器再次查看我的组件时，我都想调用我的loadData()。
浏览 2提问于2016-07-25得票数 0
回答已采纳
我是nodejs/angular2的新手。我遇到了一个奇怪的问题，节点的异步行为以及它返回到角度服务。我遇到的问题是两个不同的角度组件，比如组件A和组件B在其中注入了相同的角度服务。
服务器端是一个异步节点服务器，它需要一些时间来完成request.The问题是，当应用程序从angular组件A路由到angular组件B时，有时从组件A完成对节点的请求，但由于我们当前被路由到组件B，因此响应会到达那里。(组件A和B同时不可见。一次只有一个可见)
因为组件B也订阅了相同的服务/方法，所以它将获得为组件A指定的返回结果，从而导致不正确的值。
组件B是否有办法只接收对它发出的请求的响应。
这两个组件
浏览 0提问于2017-08-26得票数 0
我想清除本地存储数据在浏览器上的后退按钮单击。但是如何检测浏览器返回按钮在Angular2中单击。我没有得到任何确切的解决办法。有人能告诉我怎么做吗？
浏览 7提问于2017-09-11得票数 0
回答已采纳
我正在学习angular2 (我有angular1背景)。在学习Angular2时，我遇到了上面提到的例子。
1)我不理解config.js的用法。此外，我还想了解config.js中使用的"map“对象。
2)我一直在尝试导出用friend.ts文件编写的“朋友”模块。但不知何故，我无法出口，或者我不知道如何出口。看下面的代码，
app.ts
import {bootstrap, Component, CORE_DIRECTIVES} from 'angular2/angular2'
import {FirstComponent} from './first
浏览 3提问于2015-11-30得票数 0
回答已采纳
1回答
我正在构建一个关于我做的一些项目的有角度的应用程序。我有一个详细的页面，显示一个项目的细节。
问题:当我进入项目详细信息页面时，一切都是正确的。但是，当我切换项目变量(通过使用页面上的导航)时，依赖项组件不会更新，它们不会得到正确的项目ID。
包含所有组件的projectdetail.html页面：
<div class="container-content" *ngIf="project">
<div class="projectdetail">
<div class=&
浏览 2提问于2016-09-26得票数 0
回答已采纳
有人能解释当我们打开一个页面应用程序的URL时会发生什么吗？
最初的app.component.ts是先执行(构造函数和ngOnInit)，然后是app.component.html呈现还是反过来执行。另外，如果我定义了一些@ input ()，并且输入为.ts文件提供了来自app.component.html文件的一些数据，那么在这样的情况下，app.component.ts必须等待输入属性值会发生什么呢？
谁能给出一个很好的链接，或者用几行(不要太深)来解释这个过程？
浏览 3提问于2017-09-24得票数 1
回答已采纳
作为Angular2及其组件架构的新手，我可以理解，组件是Angular指令的增强版本。
当我查看与我要编写的特定i组件相关的constructor时，它所做的工作与link函数在Angular 1.x中执行的工作大致相同，因为link函数为指令的每个实例执行，因此每个实例都有自己的业务逻辑，而不会影响其他实例。
我的理解正确吗？
浏览 0提问于2017-11-15得票数 0
我正在使用Angular2。我想实现组面板可折叠。在这方面，有很多使用JQuery的例子。但是，我想使用原始的javascript来实现它。要使用JQuery，我还必须导入JQuery库，这可能会导致一些额外的加载。我认为，在我未来的开发中，除了组面板之外，可能还有一些DOM操作。我想知道使用javascript还是JQuery哪个更好。我知道他们之间有一些交易。在业绩方面，建议采用哪种方式。同时使用Angular2和JQuery是推荐的方法吗？请给我一些建议。
浏览 2提问于2017-01-24得票数 2
我只是想弄清楚构造函数和onInit函数在Angular2指令中的区别。在我看来，在创建对象时，两种方法都是使用的，那么为什么不使用构造函数呢？
浏览 5提问于2016-02-28得票数 4
回答已采纳
1回答
我做了一个自定义的attr directive，我将在兄弟元素中使用它，比如：
<div>
<div [customAttrDirective]="'value'">1</div>
<div [customAttrDirective]="'value'">2</div>
<div [customAttrDirective]="'value'">3</div>
<div [customAt
浏览 3提问于2017-07-21得票数 0
回答已采纳
我的页面上有一个很大的ngx手风琴。当我打开一些较低的手风琴时，我希望它滚动页面，以便打开的重音从窗口的顶部开始。我用scrollIntoView实现了滚动部分，但现在的问题是如何在正确的时间执行它。我目前正在ngAfterViewChecked中执行此操作，但是viewChecked被多次触发(mousemove、mouseenter等)。是否有一种方法只在DOM完成与angular2+ changeDetection单独呈现后才触发一段代码？
解决方案
这就是开始起作用的解决方案。
constructor(elementRef: ElementRef) {
this.element
浏览 0提问于2018-11-26得票数 2
回答已采纳
我拥有的组件是一个自动完成器。然而，它位于一个固定的高度div和结果div需要亲生的身体和定位，以正确显示。在angular2中做这件事的正确方法是什么？
@Component({
selector: 'autocomplete',
template: `
<div class="container" >
<div>
<input id="search" type="text" class="validate
浏览 6提问于2016-08-21得票数 3
回答已采纳
我的应用程序将显示消息列表(带卷轴)。当用户添加新消息时，页面需要滚动到消息列表的底部。在将新消息添加到消息列表后立即调用scrollToBottom()正确吗？还是会出现时间问题？视图是否已经更新(包含新消息)，因此scrollHeight将是正确的？或者用其他方式表达我的问题:是否有一种方法可以知道/确保当模型更改时视图已经完全更新了。
视图(messaging.html)：
<div class=”height: 100%; scroll: auto”>
<div class="message" *ngFor="#message of mes
浏览 2提问于2016-05-15得票数 2
回答已采纳
我在UI中使用了一些静态对象来设置一个服务。
fetchRulesVariables()
fetchRuleVariables() {
let variables = [
{
name: 'Credit Funding Type',
id: 1,
multiple: false,
hasOperators: true,
availableOperators: this.fetchOperators('inResults
浏览 0提问于2017-08-23得票数 0
回答已采纳
我有一个下拉菜单插入使用角2类型标模板，但正如我所指的JQueryUI，这个下拉函数调用createDropdown()函数对document.ready函数，但由于一些问题，这是没有被调用，我无法看到下拉列表在我的HTML。因此，我需要避免使用jQuery，并且需要完全用Angular2编写代码。下面是我要插入的Angular2模板。
import {Component, Input} from 'angular2/core';
import {option} from './option';
@Component({
selector: '
浏览 2提问于2016-02-19得票数 0
回答已采纳
我对angular2非常陌生，我正在尝试创建一个独立的、独立的angular2组件，它可以嵌入到任何网站中。有点类似于publish.twitter.com和twitter的tweet嵌入。
我不想像twitter那样使用iframe。有没有办法做到这一点呢？
浏览 0提问于2016-11-16得票数 2
考虑Angular2中的以下组件树结构
A
B
D E
如果D通过单击B发出一个事件，angular2将从根A自动启动更改检测。是否有一种方法可以使console.log更改检测，即使D没有直接将事件发送给A？
例如，在D中
html
<div (click)="update($event)"></div>
component
@Output() myOutputName = new EventEmitter();
update(event) {
this.myOutputName.emit('some vlaue&
浏览 0提问于2016-04-08得票数 1
回答已采纳
我需要订阅位于dxPopover内部的表单中的更改，如下所示，但是表单总是没有定义。
但是，如果我将表单移出dxPopover，那么就没有问题了。
当表单元素在dxPopover中时，如何访问它？
模板：
<dx-popover
target="#button"
position="bottom"
width="900px"
[visible]="true">
<div
浏览 2提问于2017-10-06得票数 1
回答已采纳
我是angular2的新手。当模板加载/初始化时，我需要调用一个函数。我知道如何在angular1.x中做到这一点，但我不能找到在angular-2中如何做到这一点。
这就是我在angular1.x中尝试的方式
在html中
<div ng-init="getItems()">
//some logic to get my items
</div>
在控制器中
getItems = function(){
console.log('in the getitems function call');
//logic to get my ite
浏览 17提问于2016-08-26得票数 3
回答已采纳
2回答
我使用的是Angular2和ionic，并且我有这样的组件：
class MyComponent implements OnInit, OnDestroy {
ngOnInit() {
console.log("init");
socket.on("something", this.something.bind(this));
}
ngOnDestroy() {
console.log("destroy");
socket.remove("somet
浏览 9提问于2017-02-01得票数 0
回答已采纳
我现在正在研究angular2很长一段时间，我想知道为什么我不能访问ngOnInit()中的对象，但它们在服务调用中是可以访问的。为了前夫。
import { Component} from 'angular2/core';
import { GlobalService} from './../../app/shared/services/global/global.service';
import { GlobalObjectsService} from './../../app/shared/services/global/global.object
浏览 0提问于2016-05-18得票数 1
回答已采纳
在angular2中维护全局变量的最佳方式是什么？我无法找到在整个应用程序中维护全局变量的方法。用户登录到应用程序后，我需要在所有其他组件中具有用户详细信息和isLoggedIn值的User对象。这就是我要做的。
@Injectable()
export class AppGlobals {
public isUserLoggedIn: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
public currentUser: BehaviorSubject<User>
浏览 5提问于2017-03-02得票数 1
回答已采纳
我正在制作一个可重用的Angular2组件，我希望用户能够指定一个模板字符串或templateUrl，然后该组件将通过属性或通过某种服务方法设置它。
在角1中，这很简单，我们可以这样做：
// somewhere else in app
myService.setTemplateUrl('path/to/template.html');
// directive definition
function myDirective(myService) {
return {
template: function(element, attrs) {
retu
浏览 4提问于2015-12-17得票数 5
回答已采纳
1回答
我想在同一个页面上重用我的组件，但是我有问题要定义我的单选按钮的值，这取决于我正在处理的按钮。
我有三个共享组件，我不知道如何区分它们。我的意思是，如果我工作在第一个，我不希望其他两个组件被修改。我用“激烈”的方式解决了问题，我想做得更好。如有任何建议，将不胜感激。
以下是我的html代码：
<div class="ui form">
<div class="inline fields">
<label for="fruit">Send to:</label>
<div c
浏览 0提问于2017-02-27得票数 2
我知道这个问题可能看起来微不足道，但事实并非如此。让我解释一下。对于一个向其所有子组件提供instacne的组件来说，这很简单，您只需这样做：
@Component({
selector: 'Starwars',
directives: [ShoppingComponent],
template: `<shopping></shopping>`,
providers: [CartActions]
})
但是，我正在尝试与我的组件的子组件共享一个实例，该实例是我通过new..如下所示：
export class Starwars {
浏览 1提问于2016-01-23得票数 1
1回答
我试图在学习角2的同时设置一个简单的路由，每当我点击一个链接，浏览器就会被路由到新的路径，但是浏览器正在重新请求所有的资源(而不是单页应用程序)。
我的索引文件，
<!--... . . various scripts and styles . . . . . --->
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/router.dev.js"
浏览 0提问于2016-03-02得票数 4
回答已采纳
1回答
我试图在角2中创建两个独立的组件，它们之间没有关系，所以它们不是嵌套的。一个组件是Users，另一个是Clients。
我要做的是单独调用它们，使用main.ts作为主要入口点，引导两个组件，然后在index.html中调用它们。
我的问题是：
我能不能不依赖于一个主入口点，直接从index.html调用它们，就像角1中的指令，或者角2，你必须依赖一个主入口组件吗？
有一个更好的方法来引导几个控制器？
以下是plunkr：
我的config.js
System.config({
//use typescript for compilation
transpiler: 'type
浏览 2提问于2016-03-14得票数 2
回答已采纳
2回答
当所有Angular2组件完成呈现时，是否会触发一个角事件？
对于jQuery，我们可以使用
$(function(){ ... })
但是，在使用Angular2时，当触发domready事件时，html只包含角组件标记。在每个组件完成呈现后，将再次触发domready事件&再次触发。
我们需要的是一个最后的事件，当所有的角度组件已经完成渲染。
浏览 2提问于2016-11-02得票数 3
我有一个基本的角度应用程序，包括以下三个组件：
汽车组件，它是主或父组件.
carousel-component ( car-component的子组件，*使用ng-content)
child-component (旋转木马子组件)
子组件中的按钮在单击时使用EventEmitter()发出一个事件。从柱塞中的代码可以看出，car组件(它是主组件或主组件)能够侦听并捕获其子组件(即，在car组件模板中更新的和{text})发出的事件。
然而，carousel-component是子组件的直接父级，它无法捕获相同的事件，并且在旋转木马组件中没有更新文本。
car-compo
浏览 4提问于2017-02-20得票数 1
1回答
在Angular 1中，我会在解析中加载http数据(用户配置文件等)。在我看来，这就是决心的目的。现在我没有明确的地方做这件事，但有很多选择。
@CanActivate()似乎可以工作..。但它会返回一个boolean，其名称很明显地表明这是一个错误的位置。
ngOnInit很好--但它是在组件构造函数之后运行的。这意味着我不能对构造函数中的用户数据做任何事情，比如将其绑定到成员变量或任何东西。当然，我也可以在ngOnInit中做到这一点，但这看起来不应该放在构造函数中吗？
因此，constructor()是一个明显的候选者。但是http请求可能很长，而且它们本身似乎与构造组件没有任何关系。
浏览 2提问于2016-03-05得票数 0
我有一个角2指令，当表放置在可滚动的div中时，使给定表的头(th)保持固定。它根据单元格上数据的大小调整列标题的大小，反之亦然。直到角度2 RC1，它才能正常工作，但在我升级到RC4之后，它就停止工作了。
过了一段时间，我意识到由框架触发的"AfterViewChecked“事件的数量已经减少了，这可能是由于一个问题得到了解决。现在的问题是，我的指令不再触发重新计算逻辑来调整表头的大小。
是否可以从父表中绑定或捕获事件，以触发重新计算过程？
指令代码大致如下：
export class TableFixedHeaderDirective implements AfterViewChe
浏览 7提问于2016-07-20得票数 3
回答已采纳
我有一个根模块，共享模块和一些其他功能模块。
功能模块中需要HttpModule和FormsModule，应该在根模块还是共享模块中导入？另外，我应该在哪里导入第三方库，比如"ng2-bootstrap“。
浏览 3提问于2016-08-18得票数 2
我正在尝试将spotfire可视化集成到angular2中。我已经下载了spotfire api javascript ie。spotfireapi.js
我不知道如何在Angular2组件中使用它。我在实例化以下内容时遇到错误：
var customization = new spotfire.webPlayer.Customization();
谁能告诉我在angular2中使用这个第三方应用程序接口的正确方法？
谢谢
浏览 0提问于2017-08-24得票数 1
在Angular2应用程序中，我试图制作一个动画
以下是组件的html：
<div [@playBox]="state" id="toPlay" class="playBox rounded-box">
</div>
以下是动画：
animations:[
trigger('playBox',[
state('closed',style({
width: '5%',
backgro
浏览 2提问于2016-12-26得票数 1
回答已采纳
我正在尝试在ASP.Net核心Web API上构建一个Angular2应用程序。
我有基本的管道在place...using角度http调用web api返回数据。
对于演示，我想使用Kendo UI。我看到Angular2的KendoUI仍处于测试阶段，网格需要一个oData服务(而不是Web API服务)。
所以我在考虑在我的JQuery组件和UI模板中为Angular2组件使用“普通”的旧KendoUI。然而，我不确定该怎么做。
我是否只是将kendo ui引用添加到packages.json文件中？那么我要在我的组件中“导入”什么才能使用它们呢？
浏览 2提问于2016-12-13得票数 0
angular2 rc1
是否可能有这样的组件：
export class MyComp {
@Output() myEvent = new EventEmitter(false)
ngOnDestroy() {
this.myEvent.emit('ngOnDestroy hook');
}
}
并在父母那里捕捉到它：
<myComp (myEvent)="test($event)"></myComp>
这似乎是不可能的，但我想知道为什么？
我知道我可以用服务来穿行。
浏览 1提问于2016-06-03得票数 1
回答已采纳
我正在从app.component.ts文件上的Angular 2快速启动代码。
该文件如下所示：
import {Component} from 'angular2/core';
@Component({
selector: 'app',
template: `<h1>Title Here</h1>'
})
export class AppComponent { }
这与预期的一样。
我想要做的是在同一页上添加另一个组件...所以我试了一下：
import {Component} from 'angul
浏览 1提问于2016-03-28得票数 14
回答已采纳
我的组件有一个可变的对象输入。当对象的属性发生变化时，不调用组件的ngOnChanges，很容易将其显示改变为understand.But。
我的组件hero-card
export class HeroCardComponent implements OnChanges , DoCheck {
@Input()
Hero: Hero;
@Input()
Title: string;
ngOnChanges(changes: SimpleChanges) {
for (const propName in changes) {
浏览 3提问于2017-09-14得票数 3
回答已采纳
我正在看一个样例Angular 2项目，并插入了一些代码，试图从传递给嵌套子组件的电影对象中提取值。
在父代码中，我有以下内容：
<div class="col-sm-6 col-md-4 col-lg-3 col-xs-6" *ngFor="let movie of movies; let i = index;">
<movie-card [movie]="movie"></movie-card>
</div>
在我的电影卡.组件.ts文件中，我有这个代码：
import { Componen
浏览 0提问于2016-12-17得票数 4
我正在创建一个通用的甘特可视化组件。
显示周和任务的部分是通用的，但是每一行都有一个我希望动态的标题，例如，当显示每个用户的任务列表时，我想要放置一些用户数据和一些操作按钮，但是当按项目显示任务时，我想要显示项目数据和项目操作按钮。
我在下面实现了一个解决方案：
一切看起来都很好，我在每个场景中都看到操作按钮的加载方式不同，但用户或项目数据却不一样。另外，在单击console.log(this.data.name)按钮时，我正确地看到了控制台中的数据，但是如果我试图在模板{{ data.name }}上打印，我什么也看不到。
我在控制台中看到以下错误：
错误:表达式检查后发生了更改。以前的值
浏览 1提问于2017-02-22得票数 17
回答已采纳
根据Angular2测试文档，对于测试组件，我们应该创建如下所示的对象：
component = fixture.createInstance;
但是对于隔离单元测试，就像服务一样，据说可以创建这样一个实例：
component = new componentClass(); //traditional way of creating objects by calling class constructor
我不太清楚这两种创建实例的方法到底有什么区别。另外，我注意到了使用这两种方法的可访问性的不同。有谁对这两者的区别有清楚的看法吗？
浏览 0提问于2016-10-28得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
