web-dev-qa-db-fra.com

Angular 2 Composant non affiché dans index.html

Je suis très nouveau dans Angular 2, alors supportez-moi .. Je tente d'obtenir un nouveau composant dans la page index.html . Le jeu 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 en tant que 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 dans le tableau de déclarations dans app.module.ts. Mais toujours rien .. J'ai vérifié la structure de mon fichier et il existe une version js de user-item.component.ts. Mais je ne peux pas voir les changements.

Toute aide serait appréciée.

À votre santé

angular2-components
4
user3355961

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 devrait être suffisant et fonctionner. Généralement, vous déclarez votre sous-composant dans le même module que le parentcomponent . Ce module est importé par app.module (module racine). 

Consultez les didacticiels relatifs aux composants Master-Detail de Angular https://angular.io/docs/ts/latest/tutorial/toh-pt2.html

1
BigPenguin

J'ai eu exactement ce même problème. Dans votre fichier app.module.ts, veillez à 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 { }
11
Tamela

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

0
Mohini Mhetre