將html代碼移動到Angular CLI中的單獨html文檔中

如何將我的html部分從app.compontent.ts移動到單獨的html documenet？它不會工作，只是在生成的類app.component.ts的HTML代碼。將html代碼移動到Angular CLI中的單獨html文檔中

另外我想移動的CSS部分，以及單獨的CSS文件。如果有人可以幫助我，或我指向正確的方向，我會greatfull

import { Component } from '@angular/core'; 
import { Hero } from './hero'; 
import { HeroService } from './hero.service'; 
import { OnInit } from '@angular/core'; 




@Component({ 
    selector: 'app-root', 
    template: ` 
     <h1>{{title}}</h1> 
      <button> my Button </button> 
     <h2 pButton type="button" icon="fa-check" iconPos="right">My Heroes</h2> 
     <ul class="heroes"> 
      <li *ngFor="let hero of heroes" 
       [class.selected]="hero === selectedHero" 
       (click)="onSelect(hero)"> 
       <span class="badge">{{hero.id}}</span>{{hero.name}} 
      </li> 
     </ul> 

     <hero-detail [hero]="selectedHero"></hero-detail> 

    `, 
    styles: [` 
     .selected { 
     background-color: #CFD8DC !important; 
     color: white; 
     } 
     .heroes { 
     margin: 0 0 2em 0; 
     list-style-type: none; 
     padding: 0; 
     width: 15em; 
     } 
     .heroes li { 
     cursor: pointer; 
     position: relative; 
     left: 0; 
     background-color: #EEE; 
     margin: .5em; 
     padding: .3em 0; 
     height: 1.6em; 
     border-radius: 4px; 
     } 
    `], 
    providers: [HeroService] 
}) 
export class AppComponent implements OnInit{ 
    title = 'Tour of Heroes'; 
    heroes: Hero[]; 
    selectedHero: Hero; 

    constructor(private heroService: HeroService){ 
    } 

    getHeroes(): void{ 
     this.heroService.getHeroes().then(heroes => this.heroes = heroes); 
    } 
    onSelect(hero: Hero): void{ 
     this.selectedHero = hero; 
    } 
    ngOnInit(): void{ 
     this.getHeroes(); 
    } 

}

來源

2017-09-15 Amar

利用templateUrl代替template在組件裝飾

templateUrl - 鏈接到外部文件，其中包含一個模板對於視圖

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
})

添加所有日E碼到app.component.html

來源

2017-09-15 06:56:34

創建單獨的HTML和CSS例如：home.component.html和component.ts文件home.component.css

添加以下代碼

import { Component, OnInit, TemplateRef } from '@angular/core'; 

@Component({ 
    selector: 'app-home', 
    templateUrl: './home.component.html', 
    styleUrls: ['./home.component.css'] 
})

來源

2017-09-15 06:58:20 Chandru

就是從我的回答 –

你可以將html代碼添加到單獨的html文件中，例如：app.component.html 將模板複製到app.component.html中，但不包含。在@Component後來做如下修改：

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
})

來源

2017-09-15 06:58:21 CruelEngine

的區別是什麼，從我的回答 –

的差異@RahulSingh沒有回答，當我們的貼吧:) – CruelEngine

時間戳說，全部 –

將html代碼移動到Angular CLI中的單獨html文檔中

回答

相關問題