angular - Mallreferensvariabel som @Input() för annan komponent

Angular v5.0.1

Jag har den här mallen på en komponent

<div #content>some content</div>
<some-component [content]="content"></some-component>

Jag vill skicka referensen till #content-variabeln till SomeComponent via @Input()content men jag är inte säker på vilken typ variabeln är.

Från vad jag sökte på webben verkar det vara ElementRef så jag gjorde det

  @Input()
  component: ElementRef;
  ngOnInit() {
    console.log(this.component); // this prints the html element on console
    console.log(this.component.nativeElement); // this prints undefined
  }

men this.component.nativeElement är undefined

Genom att göra fler tester verkar det som att this.component faktiskt är det inhemska elementet

Att göra något sådant här fungerar och faktiskt ändras bakgrundsfärgen (detta är bara för teständamål, jag är inte intresserad av att faktiskt ändra färgen på det här sättet)

this.component.style.backgroundColor = 'red';

Även om jag fick detta att fungera på det sätt jag ville har jag några frågor för att bättre förstå hur saker fungerar.

  1. Är #content det inhemska elementet och inte ElementRef ?
  2. Är detta det giltiga Angular-sättet att skicka en referensvariabel till en annan komponent?

Om du tycker att detta tillvägagångssätt är fel eller om det finns ett bättre sätt att göra detta, vänligen ge ett giltigt exempel.

Svar #1

ngOnInit() kan vara för tidigt. ngAfterViewInit() kan fungera:

ngAfterViewInit() {
  console.log(this.component); // this prints the html element on console
  console.log(this.component.nativeElement); // this prints undefined
}

Är #content det inhemska elementet och inte ElementRef ?

Om #content finns på ett vanligt element är det nativeElement.
Om elementet är värd för en komponent eller direktiv får du komponent- eller direktivinstansen.

Relaterade artiklar