创新互联Angular教程：Angular组件生命周期

Reset 按钮清除了这个 ​heroes ​列表。 Angular 从 DOM 中移除了所有英雄的 div，并且同时销毁了附加在这些 div 上的侦探指令。 侦探的 ​ngOnDestroy()​ 方法汇报了它自己的临终时刻。

同时使用组件和指令的钩子

在这个例子中，​CounterComponent ​使用了 ​ngOnChanges()​ 方法，以便在每次父组件递增其输入属性 ​counter ​时记录一次变更。

这个例子将前例中的 ​SpyDirective ​用于 ​CounterComponent ​的日志，以便监视这些日志条目的创建和销毁。

使用变更检测钩子

一旦检测到该组件或指令的输入属性发生了变化，Angular 就会调用它的 ​ngOnChanges()​ 方法。 这个 onChanges 范例通过监控 ​OnChanges()​ 钩子演示了这一点。

ngOnChanges(changes: SimpleChanges) {
  for (const propName in changes) {
    const chng = changes[propName];
    const cur  = JSON.stringify(chng.currentValue);
    const prev = JSON.stringify(chng.previousValue);
    this.changeLog.push(`${propName}: currentValue = ${cur}, previousValue = ${prev}`);
  }
}

​ngOnChanges()​ 方法获取了一个对象，它把每个发生变化的属性名都映射到了一个​SimpleChange​对象， 该对象中有属性的当前值和前一个值。这个钩子会在这些发生了变化的属性上进行迭代，并记录它们。

这个例子中的 ​OnChangesComponent ​组件有两个输入属性：​hero ​和 ​power​。

@Input() hero!: Hero;
@Input() power = '';

宿主 ​OnChangesParentComponent ​绑定了它们，就像这样：

下面是此例子中的当用户做出更改时的操作演示：

日志条目把 power 属性的变化显示为字符串。但请注意，​ngOnChanges()​ 方法不会捕获对 ​hero.name​ 更改。这是因为只有当输入属性的值发生变化时，Angular 才会调用该钩子。在这种情况下，​hero ​是输入属性，​hero ​属性的值是对 hero 对象的引用 。当它自己的 ​name ​属性的值发生变化时，对象引用并没有改变。

响应视图的变更

当 Angular 在变更检测期间遍历视图树时，需要确保子组件中的某个变更不会尝试更改其父组件中的属性。因为单向数据流的工作原理就是这样的，这样的更改将无法正常渲染。

如果你需要做一个与预期数据流反方向的修改，就必须触发一个新的变更检测周期，以允许渲染这种变更。这些例子说明了如何安全地做出这些改变。

AfterView 例子展示了 ​AfterViewInit()​ 和 ​AfterViewChecked()​ 钩子，Angular 会在每次创建了组件的子视图后调用它们。

下面是一个子视图，它用来把英雄的名字显示在一个 ​​ 中：

@Component({
  selector: 'app-child-view',
  template: `
    Hero name: 
    
  `
})
export class ChildViewComponent {
  hero = 'Magneta';
}

​AfterViewComponent ​把这个子视图显示在它的模板中：

template: `
  
child view begins
    
  
child view ends
`

下列钩子基于子视图中的每一次数据变更采取行动，它只能通过带​@ViewChild​装饰器的属性来访问子视图。

export class AfterViewComponent implements  AfterViewChecked, AfterViewInit {
  private prevHero = '';

  // Query for a VIEW child of type `ChildViewComponent`
  @ViewChild(ChildViewComponent) viewChild!: ChildViewComponent;

  ngAfterViewInit() {
    // viewChild is set after the view has been initialized
    this.logIt('AfterViewInit');
    this.doSomething();
  }

  ngAfterViewChecked() {
    // viewChild is updated after the view has been checked
    if (this.prevHero === this.viewChild.hero) {
      this.logIt('AfterViewChecked (no change)');
    } else {
      this.prevHero = this.viewChild.hero;
      this.logIt('AfterViewChecked');
      this.doSomething();
    }
  }
  // ...
}

在更新视图之前等待

在这个例子中，当英雄名字超过 10 个字符时，​doSomething()​ 方法会更新屏幕，但在更新 ​comment ​之前会等一个节拍（tick）。

// This surrogate for real business logic sets the `comment`
private doSomething() {
  const c = this.viewChild.hero.length > 10 ? "That's a long name" : '';
  if (c !== this.comment) {
    // Wait a tick because the component's view has already been checked
    this.logger.tick_then(() => this.comment = c);
  }
}

在组件的视图合成完之后，就会触发 ​AfterViewInit()​ 和 ​AfterViewChecked()​ 钩子。如果你修改了这段代码，让这个钩子立即修改该组件的数据绑定属性 ​comment​，你就会发现 Angular 抛出一个错误。

​LoggerService.tick_then()​ 语句把日志的更新工作推迟了一个浏览器 JavaScript 周期，也就触发了一个新的变更检测周期。

编写精简的钩子方法来避免性能问题

当你运行 AfterView 范例时，请注意当没有发生任何需要注意的变化时，Angular 仍然会频繁的调用 ​AfterViewChecked()​。 要非常小心你放到这些方法中的逻辑或计算量。

响应被投影内容的变更

内容投影是从组件外部导入 HTML 内容，并把它插入在组件模板中指定位置上的一种途径。 可以在目标中通过查找下列结构来认出内容投影。

• 元素标签中间的 HTML。
• 组件模板中的 ​​ 标签。

AngularJS 的开发者把这种技术叫做 ​transclusion​。

这个 AfterContent 例子探索了 ​AfterContentInit()​ 和 ​AfterContentChecked()​ 钩子。Angular 会在把外部内容投影进该组件时调用它们。

这次不再通过模板来把子视图包含进来，而是改为从 ​AfterContentComponent ​的父组件中导入它。下面是父组件的模板：

`
  
`

注意，​​ 标签被包含在 ​​ 标签中。 永远不要在组件标签的内部放任何内容 —— 除非你想把这些内容投影进这个组件中。

现在来看该组件的模板：

template: `
  
projected content begins
    
  
projected content ends
`

​​ 标签是外来内容的占位符。 它告诉 Angular 在哪里插入这些外来内容。 在这里，被投影进去的内容就是来自父组件的 ​​ 标签。

使用 AfterContent 钩子

AfterContent 钩子和 AfterView 相似。关键的不同点是子组件的类型不同。

• AfterView 钩子所关心的是 ​ViewChildren​，这些子组件的元素标签会出现在该组件的模板里面。
• AfterContent 钩子所关心的是 ​ContentChildren​，这些子组件被 Angular 投影进该组件中。

下列 AfterContent 钩子基于子级内容中值的变化而采取相应的行动，它只能通过带有​@ContentChild​装饰器的属性来查询到“子级内容”。

export class AfterContentComponent implements AfterContentChecked, AfterContentInit {
  private prevHero = '';
  comment = '';

  // Query for a CONTENT child of type `ChildComponent`
  @ContentChild(ChildComponent) contentChild!: ChildComponent;

  ngAfterContentInit() {
    // contentChild is set after the content has been initialized
    this.logIt('AfterContentInit');
    this.doSomething();
  }

  ngAfterContentChecked() {
    // contentChild is updated after the content has been checked
    if (this.prevHero === this.contentChild.hero) {
      this.logIt('AfterContentChecked (no change)');
    } else {
      this.prevHero = this.contentChild.hero;
      this.logIt('AfterContentChecked');
      this.doSomething();
    }
  }
  // ...
}

不需要等待内容更新

该组件的 ​
doSomething()​ 方法会立即更新该组件的数据绑定属性 ​
comment​。而无需延迟更新以确保正确渲染 。

Angular 在调用 
AfterView 钩子之前，就已调用完所有的 
AfterContent 钩子。 在完成该组件视图的合成
之前， Angular 就已经完成了所投影内容的合成工作。 ​
AfterContent...​ 和 ​
AfterView...​ 钩子之间有一个小的时间窗，允许你修改宿主视图。

自定义变更检测逻辑

要监控 ​ngOnChanges()​ 无法捕获的变更，你可以实现自己的变更检查逻辑，比如 DoCheck 的例子。这个例子展示了你如何使用 ​ngDoCheck()​ 钩子来检测和处理 Angular 自己没有捕捉到的变化。

DoCheck 范例使用下面的 ​ngDoCheck()​ 钩子扩展了 OnChanges 范例：

ngDoCheck() {

  if (this.hero.name !== this.oldHeroName) {
    this.changeDetected = true;
    this.changeLog.push(`DoCheck: Hero name changed to "${this.hero.name}" from "${this.oldHeroName}"`);
    this.oldHeroName = this.hero.name;
  }

  if (this.power !== this.oldPower) {
    this.changeDetected = true;
    this.changeLog.push(`DoCheck: Power changed to "${this.power}" from "${this.oldPower}"`);
    this.oldPower = this.power;
  }

  if (this.changeDetected) {
      this.noChangeCount = 0;
  } else {
      // log that hook was called when there was no relevant change.
      const count = this.noChangeCount += 1;
      const noChangeMsg = `DoCheck called ${count}x when no change to hero or power`;
      if (count === 1) {
        // add new "no change" message
        this.changeLog.push(noChangeMsg);
      } else {
        // update last "no change" message
        this.changeLog[this.changeLog.length - 1] = noChangeMsg;
      }
  }

  this.changeDetected = false;
}

这段代码会检查某些感兴趣的值，捕获并把它们当前的状态和之前的进行比较。当 ​hero ​或 ​power ​没有实质性变化时，它就会在日志中写一条特殊的信息，这样你就能看到 ​DoCheck()​ 被调用的频率。其结果很有启发性。

虽然 ​ngDoCheck()​ 钩子可以检测出英雄的 ​name ​何时发生了变化，但却非常昂贵。无论变化发生在何处，每个变化检测周期都会以很大的频率调用这个钩子。在用户可以执行任何操作之前，本例中已经调用了20多次。

这些初始化检查大部分都是由 Angular 首次在页面的其它地方渲染不相关的数据触发的。只要把光标移动到另一个 ​​ 就会触发一次调用。其中的少数调用揭示了相关数据的实际变化情况。如果使用这个钩子，那么你的实现必须非常轻量级，否则会损害用户体验。

网页名称：创新互联Angular教程：Angular组件生命周期
分享路径：http://www.mswzjz.cn/qtweb/news32/227832.html

攀枝花网站建设、攀枝花网站运维推广公司-贝锐智能，是专注品牌与效果的网络营销公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 贝锐智能