Question

我正在使用Angular 4.我正在尝试访问另一个组件中的一个组件的模板元素。我发现的唯一有用的东西（如下图所示）并不是非常'Angular'。

组件＃1（包含模板）：

  @Component({
    template: `...<input type="text" id="txtUserName" />`

组件＃2（在点击事件中获取上述组件的模板元素值）：

  (<HTMLInputElement>document.getElementById('txtUserName')).value;

我在ElementRef，ViewChild等上找到了无数的片段，但它们都没有真正用于获取模板元素的值。有没有人知道Angular 4方法完成了我上面做的同样的事情？

Answer 1

组件＃1和组件＃2之间是否存在任何关系。

如果两者都有父子关系，您可以使用@ViewChild（）或@input

进行访问

如果没有关系，则尝试使用共享服务进行访问更多信息https://angular.io/docs/ts/latest/cookbook/component-communication.html

Answer 2

您可以在Angular 4中使用FormGroups执行此操作。

组件A

FormGroups允许您将表单元素定义为表单的功能，然后将该描述附加到表单。

组件内部构造函数

 public constructor(build: FormBuilder) {
     this.form = build.group({
         username: build.control('')
     });
 }

您现在可以在模板中使用该表单组。

<form [formGroup]="form">
    <component-b></component-b>
</form>

如果将子组件放在使用FormGroup的<form>内，则可以通过依赖注入访问该控件。

组件B

您可以通过构造函数中的指令访问FormGroup，如下所示。

public constructor(public formGroupDir: FormGroupDirective) {
}

您必须等到组件准备好访问用户名控件。

public ngAfterContentInit(): void {
    let formGroup = this.formGroupDir.form;
    this.control = formGroup.get('username');
}

在子模板中，您现在可以绑定输入到表单组控件。

<input type="text" [formControl]="control"/>

你们现在都准备好了。组件 A 将通过FormGroup事件从子组件接收表单更改通知。

Answer 3

最简单的工作示例是

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

@Component({
  selector: 'template-component',
  template: `
<ng-template #templateX>
  <div>This is templateX with text: {{myText}}</div>
</ng-template>  
  `
})
export class TemplateComponent {
  @ViewChild('templateX')
  templateXRef: TemplateRef<any>;

  @Input()
  myText: string;
}


@Component({
  selector: 'my-component',
  template: `
  <template-component #link myText="John Smith">
  </template-component>

  <div>Hello there.</div>

  <ng-container *ngTemplateOutlet="link.templateXRef"></ng-container>  
  `
})
export class MyComponent {
}

在stackblitz上查看更复杂的示例。

Angular 4：访问其他组件中的模板元素

3 个答案:

组件A

组件B