2
votes

Quelle est la différence entre "view DOM" et "content DOM"?

@ViewChild et @ViewChildren interrogent les éléments de la vue DOM et @ContentChild et @ContentChildren interrogent le éléments du contenu DOM.
@ViewChildren(WriterComponent) 
writers: QueryList<WriterComponent>;    

@ContentChildren(WriterComponent) 
writers: QueryList<WriterComponent>
ici, je ne comprends pas exactement quelle est la différence entre la vue DOM et le contenu DOM, quelqu'un pourrait-il l'expliquer?

angular angular6

1 commentaires

Ceci est clairement mentionné dans cette réponse: stackoverflow.com/a/34327754/1520750

3 Réponses :

1
votes

L'élément children qui se trouve à l'intérieur de son modèle de composant est appelé view children. D'autre part, les éléments utilisés entre les balises d'ouverture et de fermeture de l'élément hôte d'un composant donné sont appelés enfants de contenu.

Accès à View Children: Afficher les documents enfants

@Component({
  selector: 'app-footer',
  template: '<ng-content></ng-content>'
})
class FooterComponent {}

@Component(...)
class TodoAppComponent {...}

@Component({
  selector: 'demo-app',
  styles: [
    'todo-app { margin-top: 20px; margin-left: 20px; }'
  ],
  template: `
    <content>
      <todo-app>
        <app-footer>
          <small>Yet another todo app!</small>
        </app-footer>
      </todo-app>
    </content>
  `
})
export class AppComponent {}


// ... in TodoAppComponent
    @Component(...)
    class TodoAppComponent implements AfterContentInit {
      @ContentChild(FooterComponent) footer: FooterComponent;
      ngAfterContentInit() {
        // this.footer now points to the instance of `FooterComponent`
      }
    }
    // ...

0 commentaires

2
votes

Disons que nous avons un composant appelé my-component.

Le @ViewChild et @ViewChildren vont récupérer quelque chose à l'intérieur de ce modèle de composants, donc un élément html qui se trouve dans le fichier my-component.component.html.

@ContentChild et @ContentChildren saisiront quelque chose qui se trouve entre les crochets d'un composant parent en utilisant le composant my. Donc, laisse jour, nous avons ce qui suit dans notre parent.component.html:

<my-component>
    <div class="name">Hans</div>
</my-component>

Vous pouvez utiliser @ContentChild et @ContentChildren pour récupérer l'élément "Hans".

0 commentaires

1
votes

Le contenu DOM définit le innerHTML des éléments de directive. Inversement, la vue DOM est un modèle de composant (component.html) excluant tout modèle HTML imbriqué dans une directive

0 commentaires