Ich habe eine eckige Komponenten-App-b, die in einer Komponenten-App-a verwendet wird, die in der App-Komponente verwendet wird. Die App-Komponente hat einige Inhalte in App-a, App-a schließt diese mit ng-Inhalten in App-b aus, App-b zeigt sie mit anderen ng-Inhalten an - aber wie kann ich auf diese Inhalte innerhalb der Komponente zugreifen (und nicht) es ist Vorlage)?

Ich würde denken, dass ContentChild der richtige Ansatz ist, aber es scheint falsch zu sein.

Beispiel:

https://stackblitz.com/edit/angular-ddldwi

EDIT: Beispiel aktualisiert

1
fortuneNext 18 Apr. 2018 im 18:52

3 Antworten

Beste Antwort

Dies scheint aufgrund eines Fehlers in Angular unmöglich zu sein: https://github.com/angular/angular/issues/20810

Weitere Referenz: https://www.reddit.com/r/Angular2/comments/8fbk3 / need_help_how_can_i_access_an_already_transcluded /

0
fortuneNext 30 Apr. 2018 im 12:44

Ich empfehle, die Daten zwischen Komponenten zu teilen. Verschieben Sie beispielsweise Ihre Daten (z. B. Dummy-Name) in einen Dienst. Fügen Sie dann den Service zu jeder Komponente hinzu (wo Sie die gemeinsam genutzten Daten benötigen).

Bedienung:

import { Injectable } from '@angular/core';

@Injectable()
export class DataShareService {
   public dummyName: String = 'one';
   constructor() { }
}

Fügen Sie den neuen Dienst zu app.module.ts hinzu:

providers: [DataShareService],

Untergeordnete Komponente:

import { DataShareService } from './data-share.service';
import { Component } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html'
})
export class ChildComponent  {
  constructor(public ds: DataShareService) { }

  toggle() {
    this.ds.dummyName = this.ds.dummyName === 'one' ? 'two' : 'one';
  }
}

Vorlage für untergeordnete Komponenten (HTML):

<p> {{ds.dummyName}}</p>
<button (click)="toggle()">Click Me to Toggle Value</button>

Übergeordnete Komponente:

import { Component, OnInit } from '@angular/core';
import { DataShareService } from './data-share.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent  {
  constructor(public ds: DataShareService) {}

  displayNumber() {
   return this.ds.dummyName === 'one' ? 1 : 2;
  }
}

Vorlage für übergeordnete Komponenten (HTML):

<p> this is the parent component:</p>
<div> value as string:   {{ ds.dummyName }} </div>
<div> value as number: <span [textContent]="displayNumber()"></span></div>
<hr>
<p> this is the child component:</p>
<app-child></app-child>

Hinweis! Die Funktion toggle () der untergeordneten Komponente zeigt, wie Sie die Daten ändern können. Die übergeordnete Komponente displayNumber () zeigt, wie die Daten unabhängig von ihrer Anzeige verwendet werden (z. B. nur reine Daten).

1
lorinpa 28 Apr. 2018 im 17:50

Sie können mit dem @ContentChild Dekorator nicht nach dem Tag-Namen abfragen. Sie können entweder nach Vorlagenvariable, Komponente oder Direktivenauswahl abfragen.

app-a.component.html

<app-b>
  <ng-content></ng-content>
  <p #myContent>This is a content child for app-b.</p>
</app-b>

app-b.component.ts

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

@Component({
  selector: 'app-b',
  templateUrl: './b.component.html',
  styleUrls: ['./b.component.css']
})
export class BComponent implements AfterContentInit {
  @ContentChild('myContent') contentchild;

  ngAfterContentInit() {
    console.log(this.contentchild);
  }
}

Live-Demo

1
Tomasz Kula 18 Apr. 2018 im 16:18