将属性添加到我的 NPM 模块

Question

这可能会被回答，但如果我能找到它该死的。我正在创建一个模块，它的工作，问题是我想将一个属性分配给我模块上的另一个属性。

所以在 Angular 2（使用 ng-module）中，我创建了一个简单的面板

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

我的工作很好，问题是我现在想为名称属性分配一个属性，我不知道什么是最好的方法。

所以我想返回 {{MyPanel.thisProperty}} 以在我调用标签的页面上使用。

这是我正在做的一个示例，针对这个问题进行了精简

这是我的 simple-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: []
    };
  }
}

---

这里是 simple-panel.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>

在包含此 html 的组件中，您可以使用简单的this.MyPanel 访问/设置 MyPanel。

在你的SimplePanel 组件中

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

再次是您需要设置和获取该字段的全部内容。