Hướng dẫn show html file in angular - hiển thị tệp html ở dạng góc

Tôi đang làm việc trên một trang web để chứng minh một số dự án phụ mà tôi đã thực hiện. Tôi đã tạo một thành phần 'dự án' có tiêu đề, danh sách các công nghệ được sử dụng và URL vào kho lưu trữ. Tôi cũng muốn có thể thêm một đường dẫn vào tệp HTML cơ bản chỉ có một số văn bản và tiêu đề giải thích dự án. Tôi không thể tìm ra cách làm điều này ... Tôi có cần tạo một thành phần riêng cho mỗi dự án không?

Mẫu hiện trông giống như thế này:

{{ title }}

  Technologies Used: {{ getTechnologiesList() }}


  

Edit:

Giải pháp của tôi là lưu trữ các tệp HTML trong thư mục SRC/tài sản và truy cập chúng bằng HTTP GET yêu cầu. Sau đó, tôi đã lưu trữ HTML dưới dạng chuỗi và đặt [innerHTML] của phần tử div như câu trả lời gợi ý.

Đây là những gì yêu cầu HTTP trông như thế nào:

descriptionPath : string = "multiquadris.htm";
projectDescription : string = "";

constructor(private http: HttpClient)
{
    this.http
        .get('assets/project-descriptions' + this.descriptionPath,
             { responseType: 'text' })
        .subscribe(data => {
            this.projectDescription = data;
        }
    );
}

Và tệp mẫu:

{{ title }}

  Technologies Used: {{ getTechnologiesList() }}

Một thay thế

Nếu bạn tự động hiển thị một số nội dung HTML trong ứng dụng của mình, bạn có thể đã sử dụng InternalHTML, nhưng điều này có thể được thực hiện một cách an toàn hơn không? Hãy cùng xem ví dụ này.example.

Trong ứng dụng này, tôi đã sử dụng thư viện dịch Ngx-dịch. Tôi có một tiêu đề, bộ chọn ngôn ngữ và một liên kết được hiển thị động.ngx-translate. I have a header, language selector, and a dynamically rendered link.

Để tái cấu trúc điều này theo cách tiếp cận mà không có bên trong,innerHtml,

1. Cập nhật từng tệp dịch để có SXM_LINK.TEXT ,,

Với bên tronginnerHtml:

Xin chào các bạn, chào mừng bạn trở lại blog của tôi. Hôm nay trong bài đăng trên blog này, tôi sẽ nói với bạn, làm thế nào để đưa tệp HTML vào thành phần Angular 12?How to include html file in angular 12 component?

Guy Guy Angular 12 đã đến. Nếu bạn mới thì bạn phải kiểm tra bên dưới hai liên kết:

1. Hướng dẫn cơ bản của Angular12
2. Các mẫu miễn phí góc cạnh

Bạn bè bây giờ tôi tiếp tục và đây là đoạn mã làm việc và vui lòng sử dụng cẩn thận điều này để tránh những sai lầm:

1. Đầu tiên, bạn bè, chúng tôi cần thiết lập góc mới 12 góc và đối với điều này, chúng tôi cũng cần chạy bên dưới các lệnh & nbsp ;, bootstrap 5 và các mô -đun tải HTML. Thứ hai, chúng tôi cũng nên cài đặt phiên bản nút mới nhất trên hệ thống của chúng tôi:, bootstrap 5 and html loader modules. Secondly we should also have latest node version installed on our system:

npm install -g @angular/cli 

ng new angulardemo //Create new Angular Project

cd angulardemo // Go inside the Angular Project Folder

npm add html-loader 

npm i bootstrap

2. Guy Lôi bây giờ chúng ta cần tạo tệp `typings.d.ts` bên trong thư mục Angulardemo/SRC và thêm mã bên dưới bên trong nó:

/* SystemJS module definition */
declare module '*html'
{
  const value:string;
  export default value
}

3. Guy bây giờ thêm mã bên dưới bên trong tệp angulardemo/tsconfig.json để gọi gõ tệp.d.ts:

{
  ...
    "typeRoots": [ 
    ...
    "../src/typings.d.ts" ],
   ...
}

4. Bây giờ Guy Lừa Tạo `testing.component.html` File Inside angulardemo/src/app thư mục và thêm bên dưới mã HTML bên trong:

    
I am coming from test.component.html file:
    

      

        
Row column
      
      

        
Row column
      
      

        
Row column
      
      

        
Row column
      
      

        
Row column
      
      
    
  

5

6. Bây giờ Guy Lừa thêm mã bên dưới bên trong tệp Angulardemo/SRC/app/app.component.ts:

...
export class AppComponent {
 ...
  test:any
  constructor() {
    this.test = require('html-loader!./testing.component.html');
    this.test = this.test.default;
  }

}

Bây giờ chúng tôi đã hoàn thành bạn bè. và xin vui lòng phục vụ lệnh để xem đầu ra. Nếu bạn có bất kỳ loại truy vấn, đề xuất và yêu cầu mới thì hãy bình luận bên dưới.ng serve command to see the output. If you have any kind of query, suggestion and new requirement then feel free to comment below.

Lưu ý: Bạn bè, trong bài đăng này, tôi chỉ nói với thiết lập cơ bản và mọi thứ, bạn có thể thay đổi mã theo yêu cầu của bạn. Để có trải nghiệm làm việc trực tiếp tốt hơn, vui lòng kiểm tra video trên đầu.please check the video on the top.

Chamkila

Cảm ơn

Làm cách nào để bao gồm một tệp HTML bên ngoài trong Angular 6?

Làm cách nào để viết mã HTML trong tệp TS trong Angular 8?

Làm thế nào bao gồm tệp HTML trong Angular 12?

INNERHTML ở góc là gì?