将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文档中

回答

相关问题