Angular 子组件绑定不起作用

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 中暴露一个 public 方法或者像 yurzui 提到的那样使用 @Input

Public 子组件中的方法

将您的 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;
}

Angular 子组件绑定不起作用

Angular sub-component binding doesn't work

angular2-components

angular2-databinding

angular