별개의 CSS for app

Question

테마가있는 Angular2 앱이 있습니다. 테마 css 및 js를 assets 폴더에 복사하고 index.html에 포함 시켰습니다. 이제 앱의 모든 웹 페이지에 적용됩니다. 나는 또한 자신의 CSS와 자체 js를 가진 자신의 (정적 - 스크립트에 의해 생성 된) HTML 페이지 인 API 온라인 문서를 가지고있다. 전반적인 테마 CSS와 문서 CSS는 함께 재생되지 않으며 index.html에 포함될 수 없습니다. 기본 사이트 테마 css 및 js를 가져 오지 않고 정적 문서 html 페이지에 어떻게 링크합니까?

동일한 응답을받은 후에 스타일 URL을 조사했지만 도움이되지 않았다는 사실을 언급해야합니다. 즉, 템플릿이있는 모든 구성 요소에 대해 동일한 styleUrl을 포함해야하며, 문서 구성 요소를 제외하고는 styleUrl에 다른 CSS를 포함해야합니다. 나는 유지 보수의 악몽이되기 때문에 그렇게하고 싶지 않습니다. 또한 주 테마에 대해 몇 가지 CSS가 있으므로 수십 개의 파일 (앞으로 수백 개)에 걸쳐 해당 문을 복제하는 것이 더욱 어려워집니다.

Answer 1

정적 문서 html 페이지가보기 만 보여주는 구성 요소 인 경우 @Component 헤더의 styleUrl 속성을 사용하여 캡슐화 된 CSS를 해당 구성 요소의보기에 적용 할 수 있습니다.

@Component{ 
... 
... 
styleUrls: ['./path/to/style.css'] 
} 
export class StaticApiDocumentation{ ... } 

Answer 2

@Component({ 
    selector: 'live-auction', 
    templateUrl: 'live-auction.html', 
    styleUrls: [] <<= inject your template css files here 
}) 

Answer 3

외부 스타일 시트가있는 경우는 @Component 데코레이터에 styleUrls에게 속성을 사용하여 응용 프로그램 구성 요소에 포함시킬 수

styleUrls: ['src/app.component.css'], 

당신에게 다음 인라인 스타일을 사용하려면 @Component 데코레이터에서 스타일을 사용할 수 있습니다.

styles: ['h1 { color: blue; }'] 

또한3210

당신은

@Component({ 
    selector: 'my-app', 
    styleUrls: ['src/app.component.css'], 
    template: ` 
    <div> 
    <h1> this is H1 tag</h1> 
     <h2>Hello {{name}}</h2> 
    </div> 
    `, 
    styles: ['h1 { color: blue; }'] 

}); 

LIVE DEMO

주 아래와 같이 예상 된 결과를 달성하기 위해 그들을 결합 할 수 있습니다 : 귀하의 경우에, 템플릿을 사용하고 있기 때문에, 당신은을 포함해야합니다 스타일 시트를 AppComponent의 템플릿에 추가하면 AppComponent가 모두의 부모가되므로 모든 구성 요소에서 사용할 수 있습니다. 또는 스타일 시트를 포함하는 일반적인 방법 인 index.html에

<link href="path_for_Stylesheets" rel="" /> 

을 사용하여 CSS 참조를 직접 포함 할 수 있습니다.