Question

我是角度2的新手，我有一个问题。我创建了一个modal作为一个名为ModalContent的组件，它的一个功能是：

@Component({
selector: 'modal-content',
templateUrl: './app/d-modal/d.modal.content.component.html',
styleUrls: [ './app/d-modal/d.modal.content.component.css' ],
providers: [InMemoryDataService],
})
export class ModalContent {
    totalSelected:number;

    addM() { 
        let selected = this.m.filter((x) => x["selected"]);
        let totalSelected = selected.length;
        console.log(totalSelected);
        this.activeModal.close('Close click');
    }}

如何将模态组件中的变量totalSelected传递给一个名为form的完全不同的组件中的函数，以便使用它与下面相同：

@Component({

 moduleId: module.id,
  selector: 'form',
  templateUrl: 'form.component.html',
  styleUrls: [ 'form.component.css' ],
  directives : [ModalContent],`

})`

export class FormComponent {
@ViewChild(ModalContent) childComp: ModalContent;
    addMForm() {
        const modalRef = this.modalService.open(ModalContent);
         modalRef.componentInstance.name = 'World';`
         this.childComp.addM();

    for (var m = 0; m < totalSelected; m++)
    {
        let newGroup = new FormGroup({
          A :new FormControl(),
          B: new FormControl(),
          C: new FormControl(),
          D :new FormControl()
        });



        this.Form.controls.users.push(newGroup);
    }}

}

我想要实现的是根据模态组件中的选择数量在表单中创建多个字段，因此无论用户在模态组件中选择什么，我想捕获全部选择变量中的数字并推送它到表单组件并在（for）中用作计数器，但它不起作用

Answer 1

如果另一个组件是子组件，则可以使用@input装饰器在父组件和子组件之间传递数据。我会看this它应该有用。此外，鉴于totalselected仅存在于您提供的函数范围内，您可能希望从函数返回它或在函数定义之前创建它。此外，既然你已经提到过你的函数存在于一个模态中，那么你可能会更有意义地将模态作为另一个组件的子函数并使用@output装饰器。

编辑 - 你可以做这样的事情

totalSelected: number;
addM() { 
let selected = this.m.filter((x) => x["selected"]);
this.totalSelected = selected.length;
console.log(totalSelected);
this.activeModal.close('Close click');
}

现在，所选的变量total在函数调用范围之外可用。

angular 2将函数var传递给不同的组件

1 个答案: