Angular 2：如何调用嵌套组件的方法？

Question

我正在尝试调用在 Angular 2 组件中声明的元素上的函数。问题是我不知道如何从我的 JS 代码中检索元素。如果我可以将模板中的元素传递给 JS 代码，它就可以工作，但是使用 document.querySelector 不会 return 任何东西。

示例代码 (plunk):

@View({
  template: `
    <div>
      <span id="p1">{{name}}</span>
      <span #p2>{{name}}</span>
    </div>
  `,
  encapsulation: ViewEncapsulation.Native
})
export class Person {
  sayHello(e) {
    p1 = document.querySelector('p1');
    console.log('p1:', p1)
    p2 = document.querySelector('p2');
    console.log('p2:', p2)

    alert('VanillaId: ' + (p1 ? p1.innerHTML : 'null') +
          '\nAngularId: ' + (p2 ? p2.innerHTML : 'null'));
  }
}

我怀疑是跟shadow有关dom，但是不知道怎么办获取影子根并使用它进行查询。 this 好像没暴露任何对访问 dom.

有用的东西

Answer 1

使用ElementRef see it here http://plnkr.co/edit/LISYnq?p=preview

我确实玩过你的笨蛋：

I don't know how to retrieve the element from my JS code

我觉得你也许可以在你的 js 代码 中设置你的组件状态，然后 mutate/display 它使用属性绑定，并进行通信in/out 有事件。

如果您提供更具体的用例，也许我们可以提供更多建议。无论如何，这是代码：

person.ts

//a simple person component
import {Component, View, ViewEncapsulation, Input, ElementRef} from 'angular2/angular2'

@Component({
  selector: 'my-person',
  inputs: ['name'],
  template: `
    <pre>
      <span> (Unsuspecting shadow dom node minding its own business)</span>
      <span #p0el> Name      : {{name}}</span>
      <span #p1el> Passed in : {{p1}}</span>
    </pre>
  `,
  encapsulation: ViewEncapsulation.Native
})

export class Person {
  public p1:string = "...";
  @Input('name') name:string;
  constructor (elementRef: ElementRef) {
    this.elementRef = elementRef;
  }
  sayHello(str) {
    this.p1 = str;
    this.elementRef.nativeElement.shadowRoot.querySelector('span').textContent = "BAM!"


  }
}

app.ts

//our root app component
import {Component, View, CORE_DIRECTIVES, ViewEncapsulation} from 'angular2/angular2'
import {Person} from './person'

@Component({
  selector: 'my-app',
  template: `
    <div>
      <!-- Passing the element here works fine -->
      <button (click)="person.sayHello('Clicked!') && person.name = 'Clicky name'">Test</button>

      <my-person #person [name]="'World'"></my-person>
    </div>`,
  directives: [CORE_DIRECTIVES, Person],
  encapsulation: ViewEncapsulation.Native
})
export class App {
  test(personComponent: Person) {
  }
}

Angular 2：如何调用嵌套组件的方法？

Angular 2: How to call the method on a nested component?

web-component

shadow-dom

angular