TypeScript - Angular 2의 컨테이너 요소에 HTML 추가

TypeScript - Angular 2의 컨테이너 요소에 HTML 추가

제가 하고 싶은 것은 단순히 요소에 html을 추가하는 것입니다.저는 몇몇 링크들을 확인했고, 혼란스럽고, 작동하지 않는, 추천되지 않는 다른 해결책들을 발견했습니다.

JavaScript를 사용하여 다음과 같은 작업을 수행합니다.

var d1 = document.getElementsByClassName('one');
d1.insertAdjacentHTML('beforeend', '<div class="two">two</div>');

유형 스크립트/각도 2, RC5를 사용하여 동일한 결과를 얻으려면 어떻게 해야 합니까?

편집

클래스가 있는 요소.one외부 js에 의해 생성되어 수정할 수 없습니다.

1.

<div class="one" [innerHtml]="htmlToAdd"></div>

this.htmlToAdd = '<div class="two">two</div>';

참고 항목RC.1에서는 바인딩 구문을 사용하여 일부 스타일을 추가할 수 없습니다.

2. 대안적으로

<div class="one" #one></div>

@ViewChild('one') d1:ElementRef;

ngAfterViewInit() {
  d1.nativeElement.insertAdjacentHTML('beforeend', '<div class="two">two</div>');
}

또는 직접 DOM 액세스를 방지하기 위해:

constructor(private renderer:Renderer) {}

@ViewChild('one') d1:ElementRef;

ngAfterViewInit() {
  this.renderer.invokeElementMethod(this.d1.nativeElement', 'insertAdjacentHTML' ['beforeend', '<div class="two">two</div>']);
}

3.

constructor(private elementRef:ElementRef) {}

ngAfterViewInit() {
  var d1 = this.elementRef.nativeElement.querySelector('.one');
  d1.insertAdjacentHTML('beforeend', '<div class="two">two</div>');
}

새로운 각도 클래스 렌더러2와 함께.

constructor(private renderer:Renderer2) {}

  @ViewChild('one', { static: false }) d1: ElementRef;

  ngAfterViewInit() {
    const d2 = this.renderer.createElement('div');
    const text = this.renderer.createText('two');
    this.renderer.appendChild(d2, text);
    this.renderer.appendChild(this.d1.nativeElement, d2);
  }

다음과 같은 작업을 수행할 수 있습니다.

htmlComponent.ts

htmlVariable: string = "<b>Some html.</b>";//표시해야 하는 TypeScript 코드의 html입니다.

htmlComponent.html

<div [innerHtml]="htmlVariable"></div>//이것은 당신의 html에 TypeScript의 html 코드를 표시하는 방법입니다.

이 답변에 대한 더 나은 해결책은 각도 기반입니다.

1. .ts 파일의 변수에 문자열 저장

   MyStrings = ["one","two","three"]

2. html 파일에서 *ngFor를 사용합니다.

   <div class="one" *ngFor="let string of MyStrings; let i = index"> <div class="two">{{string}}</div> </div>

3. div 요소를 동적으로 삽입하려면 MyStrings 배열에 더 많은 문자열을 밀어넣으면 됩니다.

   myFunction(nextString){ this.MyString.push(nextString) }

이런 식으로 myFunction(nextString)이 포함된 버튼을 클릭할 때마다 순수 javascript로 DOM에 삽입하는 것과 같은 방식으로 동작하는 다른 클래스="2" div를 효과적으로 추가합니다.

Angular로 작업할 때 Angular 8의 최근 업데이트는 다음을 소개했습니다.static내부의 재산@ViewChild()여기와 여기에 명시된 바와 같이 필요합니다.그러면 코드에 다음과 같은 작은 변경이 필요합니다.

@ViewChild('one') d1:ElementRef;

안으로

// query results available in ngOnInit
@ViewChild('one', {static: true}) foo: ElementRef;

OR

// query results available in ngAfterViewInit
@ViewChild('one', {static: false}) foo: ElementRef;

언급URL : https://stackoverflow.com/questions/39126299/typescript-append-html-to-container-element-in-angular-2