Question

我有指令

的人物页面

    <person-directive *ngFor="let person of persons; #idx = index" (remove) = "removePerson(idx)">
    </person-directive>

person指令有一些输入字段，如下所示。我想在人页面控制器中访问那些输入值。

 <div class="group">
           <label class="person-involved-name">Name</label>
           <div class="textContainer"><input type="text" value="" name="nameSelect_1" id="nameSelect_1" [(ngModel)]="personData.nameSelect_1" class="txt-box"></div>
        </div>
        <div class="group">
           <label class="person-involved-aliasname">Alias Name</label>
           <div class="textContainer"><input type="text" value="" name="aliasNameSelect_1" id="aliasNameSelect_1" [(ngModel)]="personData.aliasNameSelect_1" class="txt-box"></div>
           <div><br class="clr"></div>
        </div>

personDirective.ts定义如下。

export class PersonDirective {
 public personData;

}

和person.ts定义如下。

 export class PersonInvolvedComponent { 
     persons: Array<PersonDirective> = [];
     constructor( private router: Router, 
                 private _globalService:GlobalService) {
         this.persons.push(new PersonDirective());
 }

}

我可以访问directive.ts文件中的那些输入值，但不能访问PersonInvolvedComponent.ts文件中的那些输入值。我只能看到＆＃34; personData＆＃34;对象但不是添加到它的实际输入值。我该如何访问它。请建议我。

Answer 1

我认为在角度-2中，不可能在指令的帮助下渲染html，因此你可以使用该组件进行渲染和做一些事情。

要实现上述方案，请按照以下步骤进行操作

使用@component装饰器创建组件，并将selector的值作为person赋予 @component({ moduleId: module.id, selector : 'person', templateUrl : './person.html' }) export class PersonInvolvedComponent { // do the needed stuffs }
复制人员详细信息所需的HTML代码并粘贴.html文件。

现在根据您的需要使用选择器（人）。

<div *for="let person of personDetails">
   <person [neededInput]="person" (output)="neederStuffs()" > </person>
</div>

尝试此操作，如果您有任何疑问，请将其还原

Answer 2

应用以下更改后检查：

//人物页面更改

@MessageMapping("/postMsg/{productId}")
@SendTo("/topic/subscribeMsg/{productId}")
public Message postComment(@DestinationVariable long productId, Message msg) throws Exception {
      ...
      return msg;
}

// personDirective.ts

<person-directive *ngFor="let person of persons; #idx = index" (remove)="removePerson(idx)" [data]="person" ></person-directive>

//人-directive.html

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

@Component({
  selector   : 'person-directive',
  templateUrl: './person-directive.html'
})
export class PersonDirective {
  @Input() public data: any;      
}

如何使用angular2在其主控制器中读取指令模型值

2 个答案: