angular - 带有BehaviorSubject异步管道的Angular扩展组件不起作用(Angular extend component with BehaviorSubject async pipe not working)

Question

I can't seem to trigger the parent component's async pipe from a child component to update the view.

(我似乎无法从子组件触发父组件的异步管道来更新视图。)

Which might sound a bit confusing but let me try to explain by showing a simplified version of my code.

(这听起来可能有点令人困惑，但是让我尝试通过显示代码的简化版本来进行解释。)

If have got a class that is extended by another class.

(如果有一个被另一个类扩展的类。)

export class ParentComponent implements OnInit{
    protected subject$: BehaviorSubject<string[]>;

    ngOnInit() {
        this.subject$ = new BehaviorSubject<string[]>([]);
    }
}

With a template that looks like:

(使用如下模板：)

<span *ngFor="let niceString of subject$ | async">
    {{niceString}}
</span>

Extended by:

(扩展者：)

export class ChildComponent extends ParentComponent implements OnInit{   
    ngOnInit() {
        super.ngOnInit();

        this.subject$.next(['string1', 'string2']);
    }
}

The template is not updated in the browser.

(模板未在浏览器中更新。)

If I would call the line with subject$.next in the parent component it would update as expected and show the two strings in the browser.

(如果我在父组件中调用带有subject $ .next的行，它将按预期更新并在浏览器中显示两个字符串。)

So I tried to play around with it by calling SetTimeOut with 3 seconds delay to see if somehow it was called to fast.

(因此，我尝试通过延迟3秒调用SetTimeOut来尝试使用它，以查看是否以某种方式调用了它。)

This didn't solve the issue.

(这没有解决问题。)

I also add the subject$.next in a function in the parent that I then called from the child and also this wouldnt solve it.

(我还将subject $ .next添加到父级的函数中，然后从子级调用该函数，这也无法解决。)

But if I would call the same new function in the parent class the view was updated as expected.

(但是，如果我要在父类中调用相同的新函数，则视图将按预期进行更新。)

I also added a custom subscription in the parent that listens to the subject$ like so:

(我还在父级中添加了一个自定义订阅，可以像这样监听主题$：)

protected subjectSubscription: Subscription;

this.subjectSubscription = this.subject$.pipe(take(2)).subscribe((justChecking: string[]) => {
    debugger;
});

Which will be triggered as expected but the view in the browser isnt updated with the values 'string1', 'string2'.

(这将按预期触发，但浏览器中的视图未使用值'string1'，'string2'更新。)

Am I missing something here?

(我在这里想念什么吗？)

  ask by Robin translate from so

Answer 1

I can't reproduce the described behavior.

(我无法重现所描述的行为。)

Have a working stackblitz here: https://stackblitz.com/edit/angular-gfxqpe

(在此处进行有效的stackblitz： https ：//stackblitz.com/edit/angular-gfxqpe)

Do you maybe expect the parent's template to be used by the child?

(您可能希望孩子使用父母的模板吗？)

That won't work.

(那行不通。)

You could reference the same html file like

(您可以引用相同的html文件，例如)

@Component({
  selector: 'app-child',
  templateUrl: '../parent/parent.component.html',
  styleUrls: ['./child.component.css']
})