Création d'un placholder dans le composant

Dans Angular 4, supposons que vous deviez implémenter un composant permettant à ses utilisateurs de définir un contenu personnalisé à l'intérieur.Création d'un placholder dans le composant

Exemple:

@Component({ 
    selector: "main-navigation", 
    templateUrl: ` 
<md-sidenav-container> 
    <md-sidenav mode="side" positio="start" opened="true"> 
     <md-nav-list> 
      <a md-list-item *ngFor="let link of links" routerLink="{{link.url}}" routerLinkActive="active">{{link.text}}</a> 
     </md-nav-list> 
    </md-sidenav> 

    <!-- Some placeholder for user's: content should go here --> 

</md-sidenav-container>` 
})

Et l'utilisation prévue de ce composant serait quelque chose comme ça:

<main-navigation> 
    <router-outlet></router-outlet> <!-- <- this is some user content --> 
</main-navigation>

Quelle est la façon la plus simple de créer un tel espace réservé dans angulaire 4?

Source

2017-09-20 Alexander Abakumov

ajouter <ng-content></ng-content> à l'intérieur ici être ce que vous cherchez?

@Component({ 
    selector: "main-navigation", 
    templateUrl: ` 
<md-sidenav-container> 
    <md-sidenav mode="side" positio="start" opened="true"> 
     <md-nav-list> 
      <a md-list-item *ngFor="let link of links" routerLink="{{link.url}}" routerLinkActive="active">{{link.text}}</a> 
     </md-nav-list> 
    </md-sidenav> 

    <ng-content></ng-content> <!-- Some placeholder for user's: content should go here --> 

</md-sidenav-container>` 
})

Cela devrait ajouter probablement le <router-outlet></router-outlet> avec tout ce que l'utilisateur met entre <main-navigation> </main-navigation> tags. Je ne sais pas exactement si c'est le comportement que vous voulez, mais si vous clarifiez plus à ce sujet, peut-être que je pourrais réévaluer ma réponse.

Source

2017-09-20 16:22:08 amal

Merci, il semble que ça a fait l'affaire! Il s'est avéré être aussi simple! Je souhaite seulement que ce soit quelque part dans les documents officiels. Il n'y a même pas de lien vers les docs sur '' chose dans les [20 premiers résultats de Google] (https://www.google.com/search?q=%22ng-content%22&ei=M5fCWZCSHKHqjwST0rGgAw&start=0&sa=N&biw= 1451 & bih = 719). –

Nice! Ce [un] (https://scotch.io/tutorials/angular-2-transclusion-using-ng-content) est une lecture agréable et simple pour avoir l'idée. J'espère que cela aide. – amal

C'est! Après votre réponse j'ai commencé à déterminer si nous pouvions créer un espace réservé nommé en utilisant '' et trouvé des réponses à ce sujet dans ce post! –

Comme un développement supplémentaire de @amal réponse.

Si vous voulez avoir nommé des espaces réservés, l'une des approches possibles est ci-dessous:

... 
<ng-content select="content"></ng-content> 
...

Ensuite, vous pouvez faire:

<main-navigation> 
    <content> 
     <router-outlet></router-outlet> 
    </content> 
</main-navigation>

Crédits à this awesome post.

Source

2017-09-20 17:11:48

Création d'un placholder dans le composant

Répondre

Questions connexes