Question

我有两个组件，父母和孩子：

// Parent Directive
@Component({
   selector: 'parent-directive',
   template: `
    <button (click)="nextVal($event)"></button>
    <button (click)="prevVal($event)"></button>
    <child-directive [content]="myValue"></child-directive>`,
   directives: [ChildDirective]
})
export class ParentDirective {
    public myValue : string;

    constructor() {this.myValue = "Hello";}

    nextVal() {this.myValue = "Next";}

    prevVal() {this.myValue = "Prev";}
}

这是儿童指令：

// Child directive
type ObservableContent = Observable<string>;

@Component({
    selector: 'child-directive',
    template: `<div></div>`
})
export class ChildDirective {
    @Input() content : ObservableContent;
    subscription : Subscription;

    constructor() {
        // I instantiate the content property as an observer. I want to see if it logs anything.
        this.content = new Observable<string>(ob => {console.log('constructor', ob)});

        // I'm trying to get the propagated values here.
        this.subscription = this.content.subscribe(value => { console.log('value', value);});
    }
}

让我打破我在这里尝试做的事情。我有一个嵌套在父组件中的子组件。父级有两个按钮next和prev，单击这些按钮可更改绑定到父级范围的属性。

子项具有另一个属性content，该属性绑定到父项的myValue范围属性。当我在父级中更新myValue时，我希望更改子级的content属性。但是，当我尝试订阅该值时，永远不会调用订阅侦听器。我做错了什么？

Answer 1

我可以看到content是一个字符串，而不是一个Observable。所以你不需要在这里使用.subscribe因为它会引发错误。

在您的子组件中this.content将始终为您提供最新值。只需使用changeDetection: ChangeDetectionStrategy.OnPush即可。这样可确保仅在更改其输入属性之一时，angular才会更新组件。

要在组件中获取content的最新值，请使用angular提供的ngOnChanges生命周期方法。

// Child directive
type ObservableContent = Observable<string>;

@Component({
    selector: 'child-directive',
    template: `<div>{{content}}</div>`,
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class ChildDirective {
    @Input() content : ObservableContent;

    ngOnChanges(changes) {
     console.log('new content' + changes.content.currentValue);
     console.log('old content' + changes.content.previousValue);
  }
}

由于Angular的更改检测，模板中的内容将始终反映更新的值。

使用Observables传播Angular 2中的更改

1 个答案: