Question

如何将我的html部分从app.compontent.ts移动到单独的html documenet？它只是将html代码粘贴到生成的类app.component.ts中。

另外，我想将css部分移动到单独的css文档中。如果有人可以帮助我或指出我正确的方向，我会很高兴

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();
    }

}

Answer 1

在Component Decorator中使用templateUrl代替template

templateUrl - url到包含模板的外部文件图

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

将所有代码添加到app.component.html

Answer 2

创建单独的html和css示例： home.component.html 和 home.component.css

在component.ts文件中添加以下代码

"POST"

Answer 3

您可以在单独的html文件中添加html代码，例如：import { Component, OnInit, TemplateRef } from '@angular/core'; @Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.css'] }) 复制app.component.html内没有app.component.html的模板。稍后在@Component中进行以下更改：

将HTML代码移动到Angular CLI中的单独html文档

3 个答案: