Question

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

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

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

我工作得很好，问题是我现在想要将属性分配给名称Property，我不知道最好的方法是什么。

所以我想返回{{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";

再次需要设置并获取该字段。

将属性添加到我的NPM模块

1 个答案: