navigationend - router events subscribe angular 4
Obtener referencia a una directiva utilizada en un componente (2)
Parece que desde la respuesta de @ Abdulrahman, ya no se puede acceder a las
@ViewChild
desde
@ViewChild
o
@ViewChildren
ya que estas solo pasan elementos en el elemento DOM.
En su lugar, debe acceder a las directivas utilizando
@ContentChild
/
@ContentChildren
.
@Component({
selector: ''my-app'',
template: `
<h1>My First Angular 2 App</h1>
<div my-custom-directive>First</div>
<div #cdire=customdirective my-custom-directive>Second</div>
<div my-custom-directive>Third</div>
`
})
export class AppComponent{
@ContentChild(''cdire'') secondMyCustomDirective; // Second
@ContentChildren(MyCustomDirective) allMyCustomDirectives; //[''First'',''Second'',''Third'']
@ContentChild(MyCustomDirective) firstMyCustomDirective; // First
}
Tampoco hay una propiedad de
directives
en el atributo
@Component
.
Tengo un componente cuya plantilla se ve así:
<div [my-custom-directive]>Some content here</div>
Necesito acceso a la instancia de clase
MyCustomDirective
usa aquí.
Cuando quiero obtener acceso a un componente secundario, uso una consulta
ViewChild
.
¿Existe una función equivalente para obtener acceso a una directiva secundaria?
Puede usar la propiedad
exportAs
de la anotación
@Directive
.
Exporta la directiva que se utilizará en la vista principal.
Desde la vista primaria, puede vincularlo a una variable de vista y acceder desde la clase primaria usando
@ViewChild()
.
Ejemplo con un plunker :
@Directive({
selector:''[my-custom-directive]'',
exportAs:''customdirective'' //the name of the variable to access the directive
})
class MyCustomDirective{
logSomething(text){
console.log(''from custom directive:'', text);
}
}
@Component({
selector: ''my-app'',
directives:[MyCustomDirective],
template: `
<h1>My First Angular 2 App</h1>
<div #cdire=customdirective my-custom-directive>Some content here</div>
`
})
export class AppComponent{
@ViewChild(''cdire'') element;
ngAfterViewInit(){
this.element.logSomething(''text from AppComponent'');
}
}
Actualizar
Como se menciona en los comentarios, hay otra alternativa al enfoque anterior.
En lugar de usar
exportAs
, se podría usar directamente
@ViewChild(MyCustomDirective)
o
@ViewChildren(MyCustomDirective)
Aquí hay un código para demostrar la diferencia entre los tres enfoques:
@Component({
selector: ''my-app'',
directives:[MyCustomDirective],
template: `
<h1>My First Angular 2 App</h1>
<div my-custom-directive>First</div>
<div #cdire=customdirective my-custom-directive>Second</div>
<div my-custom-directive>Third</div>
`
})
export class AppComponent{
@ViewChild(''cdire'') secondMyCustomDirective; // Second
@ViewChildren(MyCustomDirective) allMyCustomDirectives; //[''First'',''Second'',''Third'']
@ViewChild(MyCustomDirective) firstMyCustomDirective; // First
}
Actualizar