Question

使用组件继承时有什么特别的事吗？

编辑：这涉及INHERITANCE，而不是父/子视图/组件通信

当我尝试隐藏基类模板中定义的div时，它不起作用

在页面中

，即使在代码

中修改了变量，该变量也不会更新

1，我尝试了[隐藏]和* ngIf

然后我尝试使用changeDetectorRef，但它没有做任何事情

似乎该值未传播到模板

基类：

@Component({
    selector: 'my-content',
    templateUrl: './content.component.html',
    styleUrls: ['./content.component.css'],
})    
export class ContentComponent implements OnInit {

    protected overlayVisible:boolean;

    constructor(....){...}

    ngOnInit() {
    }

    showOverlay()
    {
        this.overlayVisible=true; <<<<<<<<<<<<<< THESE GET CALLED
    }

    hideOverlay()
    {
        this.overlayVisible=false; <<<<<<<<<<<<<< THESE GET CALLED
    }
}

基本模板（content.component.html）：

<div>
    <div class="contentMainDiv">
        <div class="contentBodyDiv"><ng-content select="[body]"></ng-content></div>
        <div [innerHTML]=" overlayVisible?'true':'false' "></div> /// DEBUG DIV
        <div [hidden]="!overlayVisible" class="contentOverlay" >
            <my-wait></my-wait>
        </div>

    </div>
</div>

子组件：

export class CustomersComponent extends ContentComponent implements OnInit {

    private customers: any;

    constructor(
        private customersService: CustomersService,
        injector:Injector
        ) { super(injector); }

    getCustomers() {
        this.showOverlay();

        this.customersService.getCustomers().subscribe((customers: any) => {
            this.customers = customers;
            this.hideOverlay();
        });
    }

子模板：

<my-content>
    <div body>
        <div *ngIf="customers">
            some table ...
        </div>
    </div>
</my-content>

我缺少什么

当我们使用组件继承时，有什么特别的事情要做吗？

感谢

Answer 1

你想调用一个位于父组件中的方法，对吧？然后EventEmitter可以帮助您：

<child-component (showOverlay)="showOverlay()" (hideOverlay)="hideOverlay()"></child-component>

子组件：

import { EventEmitter, Output, OnDestroy } from '@angular/core';

 @Output showOverlay = new EventEmitter();
 @Output hideOverlay = new EventEmitter();


 getCustomers() {
    this.showOverlay.emit();
 <....rest of your code.....>

ngOnDestroy() {
   this.hideOverlay.emit();
}

我假设您销毁子组件，然后想要隐藏叠加层，因此在hideOverlay中发出了ngOnDestroy。

Answer 2

子类中的变量不会受子类中执行方法的影响。当你执行this.showOverlay（）时，它在子组件的范围内修改了this.overlayVisible。使用组件互动https://angular.io/guide/component-interaction#parent-listens-for-child-event

Answer 3

（部分）答案是：

重写类有自己的模板实例所以必须将基本模板链接到它

详细信息：https://github.com/angular/angular/issues/18920

所以在基类中添加到组件anotations：

 exportAs: 'myContentComponent',

并且子类必须具有引用它的模板

 template: `<my-baseclass-component #myContentComponent>..
            <button (click)="myContentComponent.showOverlay()">toggle</button>

现在我不知道如何从typescript子组件调用该函数以适应上面的问题

如果有人可以回答，我会更新此答案

感谢

Answer 4

我的工作方式是删除导出

class RemoteFunctionAVPlayerView: UIView {
    override func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? {
        let view = super.hitTest(point, with: event) // nil
        return view
    }
}

代码中的

<my-base-frame #baseFrame>
...
</my-base-frame>

...

@ViewChildren('baseFrame') baseFrames; // finaly found how to get base class instance

Angular 2 - 组件继承 - 未传播到基本模板的基类变量

4 个答案: