Угловой 2: Как вызвать метод на вложенном компоненте?

Question

Я пытаюсь вызвать функции на элементе, объявленном в моем компоненте Angular 2. Проблема в том, что я не знаю, как извлечь элемент из моего JS-кода. Если я могу передать элемент из шаблона в JS-код, он работает, но с использованием document.querySelector ничего не возвращает.

Пример кода (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')); 
    } 
} 

Я подозреваю, что у него есть что-то делать с тенью йот, но я не знаю, как получить тень корня и использовать его, чтобы сделать запрос. this, похоже, не показывает что-нибудь полезное для доступа к dom.

Answer 1

Использование ElementRef посмотреть здесь http://plnkr.co/edit/LISYnq?p=preview

Я поиграться с plunker:

Я не знаю, как извлечь элемент из моего JS кода

Она поражает вы можете просто настроить состояние своего компонента в своем js-коде, а затем перенести/отобразить его с помощью привязки свойств и связать вход/выход с событием s.

Если вы предоставите более конкретный вариант использования, возможно, мы сможем предложить больше советов. Во всяком случае, Херес код:

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) { 
    } 
}