Im très nouveau à Angular 2 alors supportez-moi. J'essaye de faire apparaître un nouveau composant dans la page index.html. L'ensemble de fichiers provient des fichiers de démarrage rapide de base de GitHub. J'ai créé un nouveau composant en tant que tel:

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

@Component({
    selector: 'app-user-item',
    template: `<h1>It works!</h1>`,
})
export class UserItemComponent {

}

J'ai déclaré les balises de sélection en HTML comme telles:

<!DOCTYPE html>
<html>
  <head>
    <title>Angular QuickStart</title>
    <base href="/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">

    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>

    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <script src="systemjs.config.js"></script>
    <script>
      System.import('main.js').catch(function(err){ console.error(err); });
    </script>
  </head>

  <body>

    <my-app>Loading AppComponent content here ...</my-app>
    <app-user-item>loading another component</app-user-item>
  </body>
</html>

J'ai même essayé d'ajouter l'importation en haut de app.module.ts et le nom du composant au tableau des déclarations dans app.module.ts. Mais toujours rien. J'ai vérifié la structure de mes fichiers et il existe une version js de user-item.component.ts. Mais je ne vois pas de changements.

Toute aide serait appréciée.

À votre santé

8
user3355961 26 avril 2017 à 18:21

3 réponses

Meilleure réponse

User-item.component.ts:

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

@Component ({
   selector: 'app-user-item',
   template: `<p>child item</p>`
)}

export class UserItemComponent {
  constructor(){ }
}

User.component.ts:

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

@Component({
  selector: 'app-user',
  template: ` <h2> My User Item </h2>
   <app-user-item></app-user-item>`
})

export class UserComponent { 
  constructor() {}
}

User.module.ts:

import { NgModule } from '@angular/core';
import { UserComponent } from './user-component';
import { UserItemComponent } from './user-item-component';

@NgModule({ 
  declarations: [
    UserComponent, 
    UserItemComponent
  ]
})

export class UserModule {}

Je vous encourage vraiment à utiliser angular-cli (https://github.com/angular/angular-cli). Et pour faire les tutoriels sur la page angulaire. Cependant, pour votre cas d'utilisation, le code ci-dessus doit être suffisant et fonctionner. Habituellement, vous déclarez votre sous-composant dans le même module que le composant parent. Ce module est importé par l'app.module (module racine)

Regardez les didacticiels sur les composants maître-détail de Angular https://angular.io/docs/ts/latest/tutorial/ toh-pt2.html

1
BigPenguin 26 avril 2017 à 16:14

J'ai eu exactement le même problème. Dans votre fichier app.module.ts, assurez-vous d'inclure votre composant dans votre déclaration d'amorçage.

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent }  from './app.component';
import { UserItemComponent } from './UserItem.component';

@NgModule({
  declarations : [
    AppComponent,
    UserItemComponent
  ],
  imports:      [ 
    BrowserModule 
  ],
  bootstrap:    [ 
      AppComponent,
      UserItemComponent
  ],
  providers: [],
})
export class AppModule { }
16
Tamela 20 mars 2018 à 18:08

Dans mon cas, Selector défini dans le fichier app.component.ts ne correspondait pas à index.html

0
Mohini Mhetre 12 avril 2018 à 04:42