web-dev-qa-db-ja.com

TypeScript-Angular 2のコンテナ要素にHTMLを追加

私がやりたいことは、単に要素にhtmlを追加することです。いくつかのリンクを確認しましたが、さまざまな混乱/非稼働/非推奨/などのソリューションが見つかりました。

JavaScriptを使用して、私はこのようなことをします

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

TypeScript/angular2、RC5を使用して同じ結果を得るにはどうすればよいですか？

編集

クラス.oneの要素は外部jsによって生成され、変更できません

javascriptangulartypescript
29
Gerald Hughes

1。

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

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

RC.1では、バインド構文を使用して一部のスタイルを追加できない も参照してください。

  1. 代わりに
<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>');
}
53
Günter Zöchbauer

新しいangularクラスを使用して Renderer2

constructor(private renderer:Renderer2) {}

  @ViewChild('one') 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);
  }
7
Juan

次のようなことができます：

htmlComponent.ts

htmlVariable: string = "<b>Some html.</b>"; //これは、表示する必要があるTypeScriptコードのhtmlです

htmlComponent.html

<div [innerHtml]="htmlVariable"></div> //これは、TypeScriptからのHTMLコードをHTMLに表示する方法です。

3
Stefan Svrkota

この答えには、Angularベースのより良い解決策があります。

  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に挿入するのと同じように機能する別のclass = "two" divを効果的に追加します。

2
Lorenzo Oliver

Angularを使用する場合、Angular 8への最近の更新では、前述のように@ViewChild()内のstaticプロパティが必要であることが紹介されました here および ここ 。次に、コードでこの小さな変更が必要になります。

@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;
0
Daniel Danielecki