Angular không hiển thị HTML được lấy từ thành phần?

Oct 08 2020

Tôi đang sử dụng một loạt video để làm quen với Angular, codewithmosh. Anh ấy sử dụng glyphicon trong một trong những bài tập của mình, nhưng video có từ năm 2018. Hỗ trợ glyphicon dường như đã ngừng hoạt động trong bootstrap kể từ đó, nhưng trang web bootstrap vẫn bao gồm html cho các biểu tượng của họ. Tôi đã nghĩ rằng tôi sẽ xem liệu tôi có thể làm điều tương tự bằng cách đẩy xung quanh html thô.

Vấn đề là, html được lấy từ component.ts không hiển thị, thay vào đó chỉ hiển thị mã html trên trang. Html tương tự trong component.html IS hiển thị.

Tôi thực sự mới ở đây nên có thể có một lỗ hổng rõ ràng trong mã của tôi. Nó có thể không đẹp nhưng nó có âm thanh SEEMS, và tôi không thể hiểu tại sao nó không hoạt động. Lý tưởng nhất là điều này nên được hiển thị dưới dạng dấu sao trống, khi được nhấp vào sẽ chuyển sang dấu sao đầy đủ.

Cảm ơn trước sự giúp đỡ nào!

đây là app.component.ts:

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

@Component({
  selector: 'app-star',
  templateUrl: './star.component.html',
  
 })

export class StarComponent {
  isClicked: boolean;

  
  fullStar: string = `
  <svg (click)="onClick()" width="2em" height="2em" viewBox="0 0 16 16" class="bi bi-star-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
    <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
  </svg>
  `;

  emptyStar: string = `
  <svg (click)="onClick()" width="2em" height="2em" viewBox="0 0 16 16" class="bi bi-star-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
    <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
  </svg>
  `;

  currentSymbol: string = this.emptyStar;
  
  onClick() {
    this.isClicked = !this.isClicked;

    this.currentSymbol = this.isClicked ? this.fullStar : this.emptyStar;
    
  }
}

Đây là star.component.html:

{{currentSymbol}}
-------
    <svg (click)="onClick()" width="2em" height="2em" viewBox="0 0 16 16" class="bi bi-star-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
        <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
    </svg>

Đây là app.component.html, siêu cơ bản:

<app-star></app-star>

Và đây là đầu ra html.

Trả lời

2 Elmehdi Oct 08 2020 at 02:45

Cả hai sv bạn cung cấp đều đã được điền, nhưng tôi đã làm cho bạn một ví dụ bằng cách sử dụng một ngôi sao bình thường và một ngôi sao nhỏ.

Chỉ cần thay ngôi sao nhỏ bằng một ngôi sao trống, và nó sẽ thực hiện được thủ thuật.
những gì tôi đã làm về cơ bản là, tôi đặt một ngIf trên cả hai svgs, một với điều kiện isClickedvà một với điều kiện ngược lại, vì vậy !isClicked.
chức năng của bạn để thay đổi điều kiện onClick()vẫn hoạt động tốt.