Angular 2教程：@Component装饰器的styles属性上定义的内联样式

Question

我正在浏览angular.io上的英雄之旅教程，目前我正在this page上。我到了“为我们的英雄造型”一节，并且在添加了一些内联样式后，我遇到了一个问题。将教程中的样式添加到我自己的代码中之后...我无法获取应用的样式。一切仍然显得没有风格。

我使用使用ng new tour-of-heroes创建了项目目录。

，这是我迄今为止src/app/app.component.ts：

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

export class Hero { 
    id: number; 
    name: string; 
} 

const HEROES: Hero[] = [ 
    { id: 11, name: 'Mr. Nice' }, 
    { id: 12, name: 'Narco' }, 
    { id: 13, name: 'Bombasto' }, 
    { id: 14, name: 'Celeritas' }, 
    { id: 15, name: 'Magneta' }, 
    { id: 16, name: 'RubberMan' }, 
    { id: 17, name: 'Dynama' }, 
    { id: 18, name: 'Dr IQ' }, 
    { id: 19, name: 'Magma' }, 
    { id: 20, name: 'Tornado' } 
]; 

@Component({ 
    selector: 'app-root', 
    template: ` 
    <h1>{{title}}</h1> 
    <h2>My Heroes</h2> 
    <ul class="heroes"> 
     <li *ngFor="let hero of heroes"> 
     <span class='badge'>{{hero.id}}</span> {{hero.name}} 
     </li> 
    </ul> 
    <h2>{{hero.name}} details!</h2> 
    <div><label>id: </label>{{hero.id}}</div> 
    <div> 
     <label>name: </label> 
     <input [(ngModel)]="hero.name" placeholder="name"> 
    </div> 
    `, 
    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; 
    } 
    .heroes li.selected:hover { 
     background-color: #BBD8DC !important; 
     color: white; 
    } 
    .heroes li:hover { 
     color: #607D8B; 
     background-color: #DDD; 
     left: .1em; 
    } 
    .heroes .text { 
     position: relative; 
     top: -3px; 
    } 
    .heroes .badge { 
     display: inline-block; 
     font-size: small; 
     color: white; 
     padding: 0.8em 0.7em 0 0.7em; 
     background-color: #607D8B; 
     line-height: 1em; 
     position: relative; 
     left: -1px; 
     top: -4px; 
     height: 1.8em; 
     margin-right: .8em; 
     border-radius: 4px 0 0 4px; 
    } 
    `], 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
    title = 'Tour of Heroes'; 
    heroes = HEROES; 
    hero: Hero = { 
    id: 1, 
    name: 'Windstorm' 
    }; 
} 

Answer 1

我意识到这个问题的权利，我贴我的问题...联样式不是从styles属性应用的原因，是因为有一个styleUrls财产！