Render template string trong Angular2
TIL
635
angular 2
7
White

Hà Phạm 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

Hà Phạm

25 bài viết.
66 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
43 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...
Hà Phạm viết hơn 3 năm trước
43 8
White
33 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...
Hà Phạm viết 3 năm trước
33 8
White
32 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...
Hà Phạm viết hơn 3 năm trước
32 3
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 5 tháng trước
0 2
White
20 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 2 năm trước
20 1
White
9 0
Có một tuyên ngôn cho chủ nghĩa tối giản trong ngành phần mềm. Link: http://minifesto.org/ Fight for Pareto's law, look for the 20% of effort th...
Cẩm Huỳnh viết 2 tháng trước
9 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

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


White
{{userFollowed ? 'Following' : 'Follow'}}
25 bài viết.
66 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á!