각도 2의 요소를 연결하는 방법은 무엇입니까?

Question

나는 내 웹 사이트를 위해 사용자가 사이트 테마를 변경하도록 제공하고있는 기능을 구축하려고합니다. 그냥 시작, 나는 '어두운 테마'를 유지하는 줄 알았는데. 그래서, 어두운 테마를 별도로 구현하려고합니다.

스크린 샷에서 알 수 있듯이 사용자가 어두운 테마를 클릭하고 사이트 색상을 변경할 수있는 모달이 열립니다. 이 모달 구성 요소는 customize.component.html입니다. 백그라운드에서 웹 사이트의 결과를 볼 수 있습니다. 나는 이것을 results.component.html이라고 부른다.

results.component.ts

<!-- Customization modal-box --> 
<link type="text/javascript" href="../../assets/themes/theme.js"> 
<div class="modal fade" id="customization" tabindex="-1" role="dialog" aria-labelledby="myModallabel"> 
    <app-customize></app-customize> 
</div> 

이 두 구성 요소에 대한 내 코드입니다

<link type="text/javascript" href="../../assets/themes/theme.js" id="theme"> 
<div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
    <div class="modal-header"> 
     <!-- Start ignoring HTMLLintBear --> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <!-- Stop ignoring HTMLLintBear --> 
     <h2 class="modal-title" id="my-modal-label">Customization</h2> 
    </div> 
    <div class="modal-body"> 
     <button class="theme-button" id="dark" onclick="darkTheme(title)">Dark Theme</button> 
    </div> 
    </div> 
</div> 

customize.component.ts

. 테마 프로세스가 작동 할 다른 파일 이름 theme.js을 만들었습니다. 하지만 내 코드가 작동하지 않습니다.

theme.js

function darkTheme(id) { 
    var el = document.getElementById(id); 
    el.style.color = "red"; 
} 

어떻게 results.component.ts에서 ID로 요소를 취해야합니까? 이 기능을 구현할 수 없습니다. 누군가가 나를 도울 수 있다면 좋을 것입니다! 감사!

주 - 저는 프로젝트에서 각도 재료 2를 사용하지 않습니다. 따라서 각도 재질 2를 사용하지 않고 사용자에게 테마를 제공하는 기능을 구현해야합니다.

Answer 1

각도 2로 작업 할 때 링크 태그로 참조되는 일반 JavaScript를 피하는 것이 좋습니다.

귀하의 customise.component.ts 파일에 darkTheme 기능이 있어야합니다. 선택한 색상을 다른 구성 요소와 공유하고 싶다고 생각합니다. 다른 곳에서 사용하십시오. 방법 중 하나는 서비스를 사용하고 그 안에 데이터를 저장하는 것입니다.

export class CustomiseComponent { 
    constructor(
     private themeService: ThemeService 
    ) { 
    } 

    darkTheme() { 
     this.themeService.themeColor = 'red'; 
    } 
} 

@Injectable() 
export class ThemeService{ 
    public themeColor: string; 
} 

customise.component.html

<div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
    <div class="modal-header"> 
     <!-- Start ignoring HTMLLintBear --> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <!-- Stop ignoring HTMLLintBear --> 
     <h2 class="modal-title" id="my-modal-label">Customization</h2> 
    </div> 
    <div class="modal-body"> 
     <button class="theme-button" id="dark" (click)="darkTheme()">Dark Theme</button> 
    </div> 
    </div> 
</div> 

공지 사항 클릭이 이루어 바인딩하는 방식 : (클릭) = "darkTheme()". 다음으로, 동일한 ThemeService를 ResultsComponent에 삽입하고 원하는대로 themeColor 필드를 사용할 수 있습니다.

예를 들어

: results.component.ts

export class ResultsComponent { 
    constructor(
     public themeService: ThemeService 
    ) { 
    } 
} 

이 문제에 대한 잠재적 인 솔루션을 제공하지만,

<label [style.color]="themeService.themeColor">Your colorful text</label> 

results.component.html 그것은 실제 사건에 오면, 그것을 색상 대신 CSS 클래스 이름을 사용하는 것이 더 좋을 수 있습니다.

업데이트

테마가 구현 될 수있는 방법을 보여주는 예는 다음 링크에서 볼 수 있습니다 : 좋은 생각이 덜 나 SASS 사용하는 것입니다, 일반적으로

https://embed.plnkr.co/PX1kcJAbNmBxTZmAzsiS/

테마 정의를 크게 단순화합니다.