Búsqueda de sitios web

angular - Angular2, TypeScript, Cómo leer/vincular el valor de un atributo a la clase del componente (indefinido en ngOnInit)


¿Alguien puede aconsejarme cómo leer/vincular el valor de un atributo a la clase @component, que parece estar indefinido en el método ngOnInit?

Aquí hay una demostración en plunker: http://plnkr.co/edit/4FoFNBFsOEvvOkyfn0lw?p=preview

Me gustaría leer el valor del atributo "someattribute"

<my-app [someattribute]="'somevalue'">

dentro de la clase App (src/app.ts) método ngOninit.

¡Gracias!

Respuesta #1

Puedes notar que tales parámetros no se pueden usar para el componente raíz. Consulta esta pregunta para más detalles:

  • Parámetros de entrada de Angular 2 en la directiva raíz

La solución consiste en aprovechar la clase ElementRef. Debe ser inyectada en su componente principal:

constructor(elm: ElementRef) {
  this.someattribute = elm.nativeElement.getAttribute('someattribute'); 
}

Necesitamos usar el componente de esta manera en el archivo HTML:

<my-app someattribute="somevalue"></my-app>

Respuesta #2

Deberías usar el decorador @Input.

Este es un ejemplo:

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

@Component({
    selector: 'user-menu',
    templateUrl: 'user-menu.component.html',
    styleUrls: ['user-menu.component.scss'],
})
export class UserMenuComponent {

    /**
     * userName Current username
     */
    @Input('userName') userName: string;

    constructor() {

    }
    sayMyName() {
        console.log('My name is', this.userName);
    }
}

Y usarlo

<user-menu userName="John Doe"></user-menu>

Artículos relacionados