在angular2中使用@ViewChild

Question

尝试使用双向数据绑定，将本地引用传递给方法＆amp;使用@ViewChild进行本地引用。但我没有得到理想的输出。请在下面找到我的代码＆amp;建议

app.component.ts

export class AppComponent {

  serverElements = [{type: 'server', name: 'Test Server', content: 'This is test server', port: 4200}];

  onServerAdded(serverData: {serverName: string, serverContent: string, serverPort: number}) {
    this.serverElements.push({
    type: 'server',
    name: serverData.serverName,
    content: serverData.serverContent,
    port: serverData.serverPort,

      });
    }

    onBlueprintAdded(blueprintData: {serverName: string, serverContent: string, serverPort: number}) {
      this.serverElements.push({
        type: 'blueprint',
        name: blueprintData.serverName,
        content: blueprintData.serverContent,
        port: blueprintData.serverPort,

      });
    }

    onServerPortAdded(portData: {serverName: string, serverContent: string, serverPort: number}) {
      this.serverElements.push({
        type: 'port',
        name: portData.serverName,
        content: portData.serverContent,
        port: portData.serverPort,

    });
  }
}

app.component.html

<div class="container">
    <app-server-base (serverCreated)=" onServerAdded($event) " (blueprintCreated)=" onBlueprintAdded($event) " (serverPortAdded)=" onServerPortAdded($event)" (serverLocationAdded)=" onServerLocationAdded($event)">Loading...</app-server-base>
    <hr>
    <div class="row">
        <div class="col-xs-12">
            <app-server-element *ngFor="let serverElement of serverElements" [element]="serverElement">Loading...</app-server-element>
        </div>
    </div>
</div>

服务器base.component.ts

export class ServerBaseComponent implements OnInit {
  @Output() serverCreated = new EventEmitter<{serverName: string, serverContent: string, port: number}>();
  @Output() blueprintCreated = new EventEmitter<{serverName: string, serverContent: string, port: number}>();
  @Output() serverPortAdded = new EventEmitter<{serverName: string, serverContent: string, port: number}>();
  newServerName = '';
 // newServerContent = '';
  @ViewChild('portNumberInput') portNumberInput: ElementRef;

  constructor() { }

  ngOnInit() {
  }

  addServer(contentInput: HTMLInputElement) {
    this.serverCreated.emit({serverName: this.newServerName,
      serverContent: contentInput.value,
      port: this.portNumberInput.nativeElement.value});
    }

    addBlueprint(contentInput: HTMLInputElement) {
      this.blueprintCreated.emit({serverName: this.newServerName,
        serverContent: contentInput.value,
        port: this.portNumberInput.nativeElement.value});
    }

    addServerPort(contentInput: HTMLInputElement) {
      this.serverPortAdded.emit({serverName: this.newServerName,
        serverContent: contentInput.value,
        port: this.portNumberInput.nativeElement.value});
    }
}

服务器base.component.html

<div class="row">
    <div class="col-xs-12">
        <h4> Add Server Details </h4>
        <label> Server Name </label>
        <input type="text" class="form-control" [(ngModel)]="newServerName">
        <label> Server Content </label>
        <input type="text" class="form-control" #serverContentInput>
        <label> Server Port </label>
        <input type="text" class="form-control" #portNumberInput>
        <br>
        <button class="btn btn-primary" (click)="addServer(serverContentInput)"> Add Server </button>
        <button class="btn btn-primary" (click)="addBlueprint(serverContentInput)"> Add Server Blueprint </button>
        <button class="btn btn-primary" (click)="addServerPort(serverContentInput)"> Add Server Port </button>
    </div>
</div>

服务器element.component.ts

export class ServerElementComponent implements OnInit {

  @Input() element: {type: string, name: string, content: string, port: number};
  constructor() { }

  ngOnInit() {
  }

}

服务器element.component.html

<div class="panel panel-default">
    <div class="panel-heading">{{ element.name}}</div>
    <div class="panel-body">
        <p>
            <strong *ngIf="element.type === 'server'" style="color: red">{{ element.content }}</strong>
            <em *ngIf="element.type === 'blueprint'">{{ element.content }}</em>
        </p>
        <p> <strong>{{ element.port }} </strong></p>
    </div>
</div>