Question

我正在学习angular2。
在初始页面加载期间，我需要更改添加/编辑首选项颜色。
你能告诉我如何解决它吗？
我用google搜索加载事件。
但我无法找到任何东西。
在下面提供我的代码。

https://stackblitz.com/edit/angular-zddcxy?file=app/app.component.html

<!-- language-all: lang-or-tag-here -->

 public loadColor() {
      console.log('this.changeColor--->');
  }
    <span id="open1" (click)="loadColor()">add/edit prefrence</span>

Answer 1

对于catch初始页面加载事件，您需要使用Angular组件生命周期钩子。所以你需要它添加ngOnInit由Angular调用完成创建组件。

要添加ngOnInit，您需要导入OnInit

import {Component, OnInit} from '@angular/core';

您需要添加ngOnInit挂钩方法

 //implement OnInit's `ngOnInit` method
ngOnInit(){
   console.log('this.changeColor--->');
}

了解更多信息https://angular.io/guide/lifecycle-hooks

我已更新您的代码https://stackblitz.com/edit/angular-gzqebz?file=app/app.component.ts

Answer 2

使用ngOnInit和ViewChild装饰器

@ViewChild('open1') el:ElementRef;

  ngOnInit(): void {
  const span = this.el.nativeElement;
  span.style.color = 'red';
}

在HTML中添加＃open1作为ref

<span #open1 id="open1" (click)="loadColor()">add/edit prefrence</span>

请参阅https://stackblitz.com/edit/angular-uvmusm?file=app/app.component.html

在初始页面加载期间需要更改添加/编辑颜色

2 个答案: