Render template string trong Angular2
TIL
589
angular 2
7
White

Hoàng Duy viết ngày 05/09/2016

05/09/2016 - 11:02AM
NOTICE: Đã update bài viết tương thích với angular 2.0.0-rc.6

05/09/2016 - 10:26AM
WARNING: Nội dung bài viết đã lỗi thời, vì DynamicComponentLoader đã bị bỏ đi trong phiên bản rc6. Mình đang cập nhật kiến thức để sửa bài viết

Trong một số hoàn cảnh nhất định bạn nhận được một đoạn html và cần render ra cho người dùng xem. Với angular 2 các bạn có thể bind trực tiếp vào thuộc tính innerHTML của đối tượng DOM cần render vào. Ví dụ

<div [innerHTML]="'<h1>The title</h1>'"></div>

Tuy nhiên cái phần thêm vào lại nằm ngoài scope của angular, mình không được dùng đến các directive, pipe. Đã thế nhiều element bị lược bỏ, bao gồm cả button.

WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).

May là angular có cung cấp một dịch vụ tên là DynamicComponentLoader export service Compiler, giúp tạo component on the fly và attach vào chỗ mình cần. Ý tưởng là tạo một cái dummy component có template là đoạn html, rồi load vào component chính của mình. Sau bản update rc5 thì mình cần tạo ra một NgModule để gói cái component này lại.

@Directive({
  selector: '[dynamic-content]',
  providers: [  ],
})
export class DynamicContent {
  @Input('dynamic-content') value;
  @Input('local') local;

  constructor(
    private compiler: Compiler,
    private viewRef: ViewContainerRef,
  ) {}

  ngOnInit() {
    this.load(this.value);
  }

  private load(template) {
    let local = this.local;
    console.log(local);
    @Component({
      selector: 'content-component',
      template,
    })
    class ContentComponent {
      constructor() {
        Object.assign(this, local);
      }
    }

    @NgModule({
      imports: [BrowserModule],
      declarations: [ContentComponent],
    })
    class DynamicModule {}
    this.compiler.compileModuleAndAllComponentsAsync(DynamicModule)
      .then(factory => {
        // tìm cái component trong module được tạo ra
        const compFactory = factory.componentFactories.find(x => x.componentType === ContentComponent);
        // lấy injector của thằng component cha, phục vụ cho DI
        const injector = ReflectiveInjector.fromResolvedProviders([], this.viewRef.parentInjector);
        this.viewRef.createComponent(compFactory, 0, injector, []);
      });
  }
}
// some where 
@Component({
    ...
    template: `
       <div [dynamic-content]="content", [local]="contentLocal">
    `
    ...
})
class AppComponent {
  public content = `
    <div>
      <h2>Fancy content</h2>
      All platform directive can be used here

      <div>The time is {{ currentTime | date: 'mediumTime' }}  </div>
      <button>This button is cool</button>
    </div>
  `;

  public contentLocal = {
    currentTime: new Date(),
  };
}

ABC: Các bác test API phải có sandbox thế nào chứ notification nhảy lung tung quá

mahpahh 02-08-2016

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Hoàng Duy

24 bài viết.
61 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
40 8
Xin chào, đây là lần đầu tiên mình post bài ở đây. Nhiều vấn đề mình cũng không rành lắm, có gì sai mọi người góp ý nhé. Xin cảm ơn :D Bài này gi...
Hoàng Duy viết 3 năm trước
40 8
White
30 3
Đây là một trong các concept mới đối tượng mới được đưa vào ECMAScript 6. Việc sử dụng chúng rất dễ nhưng để hiểu được thì (đối với tôi) cũng cần k...
Hoàng Duy viết 3 năm trước
30 3
White
27 8
Lâu không post gì muốn viết một bài dài dài về js cơ mà đau đầu quá viết mãi không xong, thôi post bài ngắn vậy :smiley: Lấy screen size ở đây tôi...
Hoàng Duy viết gần 3 năm trước
27 8
Bài viết liên quan
White
0 2
fCC: Technical Documentation Page note So I have finished the HTML part of this exercise and I want to come here to lament about the lengthy HTML ...
HungHayHo viết 27 ngày trước
0 2
White
19 1
Toán tử XOR có tính chất: + A XOR A = 0 + 0 XOR A = A Với tính chất này, có thể cài đặt bài toán sau với độ phức tạp O(N) về runtime, và với O(1)...
kiennt viết gần 2 năm trước
19 1
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
24 bài viết.
61 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!