將屬性添加到我的NPM模塊

Question

這可能會得到解答，但該死的如果我能找到它。我正在創建一個模塊，它的工作，問題是我想分配一個屬性到我的模塊上的另一個屬性。

所以在角2（含伍模塊），我創建了一個簡單的面板

<simple-panel name="MyPanel"></simple-panel> 

我有它工作的偉大，問題是我想要的屬性的名稱屬性現在分配，我有不知道什麼是最好的辦法做到這一點。

所以我想返回{{MyPanel.thisProperty}}，以便在我調用標籤的頁面上使用。

這裏是我在做什麼的樣本，剝離下來的這個問題

這裏是我的簡單panel.ts

---

import {Component,NgModule,ModuleWithProviders, Directive, Input} from '@angular/core'; 


    /** 
* Content of the edit panel. 
*/ 

@Directive({ 
    selector: 'simple-panel-edit-panel-content' 
}) 
export class SimplePanelEditPanelContent {} 

@Component({ 
    selector: 'simple-panel', 
    templateUrl: 'simple-panel.html', 
    styleUrls: ['simple-panel.css'], 
    encapsulation: ViewEncapsulation.None 
}) 


export class SimplePanel{ 
    private _name: string; 
    private _announceedit: boolean = false; 
    private _buttonname: string = 'edit'; 

    /** This sets the Name as a variable that can be used. */ 
    @Input() 
    get name(): string { return this._name; } 
    set name(value) { this._name = value; } 

/**Sets the Edit Announcement */ 
    @Input() 
    get editannounce(): boolean { return this._announceedit; } 
    set editannounce(value: boolean) { 
     if (!value) { 
     this._announceedit = true; 
     this._buttonname = 'search'; 
    }else{ 
     this._announceedit = false; 
     this._buttonname = 'edit'; 
    } 
    } 


} 

@NgModule({ 
    exports: [SimplePanel,SimplePanelEditPanelContent], 
    declarations: [SimplePanel,SimplePanelEditPanelContent], 
}) 
export class SimplePanelComponent { 
    static forRoot(): ModuleWithProviders { 
    return { 
     ngModule: SimplePanelComponent, 
     providers: [] 
    }; 
    } 
} 

---

這裏是一個簡單的面板.html

<md-card> 
     <md-card-title-group> 
      <button md-raised-button (click)="editannounce=editannounce;"><md-icon>{{ _buttonname }}</md-icon></button> 
     </md-card-title-group> 
     <md-card-content> 
     <ng-content select="simple-panel-edit-panel-content"></ng-content> 
     </md-card-content> 
     <md-card-actions> 
     <button md-raised-button (click)="editannounce = editannounce"><md-icon>save</md-icon> SAVE</button> 
     </md-card-actions> 
    </md-card> 

---

當有人使用該模塊時，當某人點擊按鈕時，按鈕創建一個面板 我可以訪問上面模板中的變量，但是我想要做的實際上是訪問一個在頁面上使用的變量他們稱之爲模塊使用。將它命名爲MyPanel.announceedit或MyPanel.editable作爲示例會很好，但主要是創建並監視一個變量，當它更改時將其傳遞迴模塊使用的位置並允許用戶可以在內容區域內訪問它，所以如果他們添加了一個輸入，並希望查看該按鈕是否被點擊以設置它們可能的readOnly屬性。希望這更有意義。

Answer 1

如果您在包括這個網站的部分寫它像

<simple-panel [name]="MyPanel"></simple-panel> 

，你可以用一個簡單的this.MyPanel訪問/套MyPanel。

而在你SimplePanel組件

@Input() name; 
... 
this.name = "something"; 

又是所有你需要設置和獲取現場。