從父項繼承選擇器

我想創建一個父類（Event），它將處理四個孩子（投票事件，視圖事件，我的事件，我的票）的DOM。從父項繼承選擇器

這個想法將是一個唯一的HTML，一個父級Compoment和4個子組件，它將覆蓋一些父級方法。這是典型的多態情況。

總之，我有一個父組件：

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

export abstract class EventsComponent implements OnInit{ 
    constructor() {}; 
    ngOnInit() { 
     this.test(); 
    } 
    abstract test(); 
}

父HTML：

<div id="main"> 
<div class="container pad-top"> 
    <div class="row"> 
    <div class="col-xs-12 nopadding text-center"> 
     <a [routerLink]="['/events/vote-events']"><img class="img-responsive sin-looks-votacion" 
                src="assets/images/no-tienes-votaciones.jpg"></a> 
    </div> 
    </div> 
</div>

而且我想這樣做：

子組件：

export class MyVotesComponent extends EventsComponent { 

    private potato; 

    constructor() { 
     super(); 
    } 

    test() { 
     console.log("Testttttttttttt"); 
    } 
}

子html：

<app-events></app-events>

的事情是，我不得不從events.module.ts聲明刪除EventsComponent。現在瀏覽器會拋出：

'app-events' is not a known element:

最後一個問題是：這是最好的方法嗎？如果不是，會是什麼？我應該讀什麼？如果這確實是最好的方法，我錯過了什麼？

在此先感謝。

一切順利，

亞歷

來源

2017-06-02 abullrich

爲什麼要擴展組件？ – Aravind

我不是100％以下...也許是'ng-content'或'@ ContentChildren'的用例嗎？ – Jeff

@Aravind我想擴展父組件，以避免子組件中的重複代碼。 @Jeff請你再詳細說明一下嗎？「@ ContentChildren」或「ng-content」會做什麼。謝謝！ – abullrich

我認爲你必須複製的templateUrl和styleUrls在@Component裝飾每個子類的。但至少你可以保持這些文件在同一個地方：

@Component({ 
    selector: 'my-votes', 
    templateUrl: './events.component.html', 
    styleUrls: ['./events.component.css'] 
}) 
export class MyVotesComponent extends EventsComponent { 

    private potato; 

    constructor() { 
     super(); 
    } 

    test() { 
     console.log("Testttttttttttt"); 
    } 
}

你可能會想從你的抽象基類中刪除@Component裝飾。

來源

2017-06-02 22:31:22

我會試一試，這絕對值得一試。謝謝！ – abullrich

好的，抱歉我的答案延遲。我在週末外出，沒有時間搗鼓代碼。這確實解決了我的問題，並能夠成功地重新使用相同的html和父組件。乾杯! – abullrich

從父項繼承選擇器

回答

相關問題