Question

我正在尝试使用依赖注入在子组件中显示消息。

这是first.component.ts：

import { Component } from '@angular/core';
import { SecondComponent } from './second.component';

@Component({
  selector: 'app-first',
  template: `<button (click)="onClick()">Yes</button>
             <app-second></app-second>
             `,
  providers: [ SecondComponent ]
})

export class FirstComponent {
  constructor(private secondComponent: SecondComponent) {}
  onClick() {
    this.secondComponent.Show('Test message');
  }
}

这是second.component.ts：

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

@Component({
  selector: 'app-second',
  template: '<p>{{ _message }}</p>'
})

export class SecondComponent {
  _message: string;

  Show(message: string) {
    this._message = message;
  }
}

控制台显示没有错误，但浏览器中的{{_message}}未更新。

我哪里错了？

Answer 1

你可以通过以下两种方式之一做到这一点;在SecondComponent中公开一个公共方法，或者使用@Input作为yurzui提到的

子组件中的公共方法

将您的FirstComponent更改为

@Component({
  selector: 'app-first',
  template: `<button (click)="onClick()">Yes</button>
             <app-second #second></app-second>
             `,
  providers: [ SecondComponent ]
})

export class FirstComponent {
  @ViewChild('second') second;
  constructor(private secondComponent: SecondComponent) {}
  onClick() {
    second.Show('Test message');
  }
}

并将SecondComponent中的Show方法标记为public

或使用@Input 将数据直接传递到您的子组件

@Component({
  selector: 'app-first',
  template: `<button (click)="onClick()">Yes</button>
             <app-second message="message"></app-second>
             `,
  providers: [ SecondComponent ]
})

export class FirstComponent {
  public message: string;
  constructor(private secondComponent: SecondComponent) {}
  onClick() {
    this.message = 'Test message';
  }
}

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

@Component({
  selector: 'app-second',
  template: '<p>{{ _message }}</p>'
})

export class SecondComponent {
  @Input() _message: string;
}

角度子组件绑定不起作用

1 个答案: