角度子组件绑定不起作用

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

您可以做这两种方法之一；在您的第二组件中公开一种公共方法或使用@Input如Yurzui所述

儿童组件中的公共方法

将您的第一个组合更改为

@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');
  }
}

并将其在第二组件中标记为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;
}