如何從根元素獲取下載的內容數據？角度2

Question

經過數小時的谷歌搜索，我還沒有成功找到解決方案。

我想在文章中添加共享功能。 類似於wordpress簡碼。 因此，內部具有<功能>功能內容</ feature>的內容。 該文章可以具有多個功能。

現在，我知道必須有一個根元素。 這就是問題所在。 當我將文章放在<blog-app> </ blog-app>組件中時，內容將被組件模板覆蓋。

我知道有<ng-content>，但這僅在根組件內部有效。

我希望文章內容隨頁面一起加載，即使沒有啟動javascript，搜索引擎也可以看到內容。 因此，我不想使用REST API加載內容。

您將如何處理？ 我應該如何閱讀原始文章，然后如何將其放入角根元素中？

謝謝你的建議！

Answer 1

我發現了一點小技巧，但可能無法在所有情況下都起作用。

 @Component({
  selector: 'blog-app',
  template: document.getElementsByTagName('blog-app')[0].innerHTML

})

export class BlogAppComponent {

}

Answer 2

如果在組件的模板中放置<ng-content></ng-content>標簽怎么辦？ 它應該保留-也稱為“項目”-的原始內容，不是嗎？

Angular編譯之前（這是服務器返回的原始index.html ）：

<body>
  <my-app>
    <p>Some article content</p>
  </my-app>
</body>

Angular編譯之后（這是Angular在客戶端瀏覽器中編譯之后的頁面；如果在客戶端瀏覽器中禁用了JavaScript，則不會執行此部分）：

<body>
  <my-app>

    <!-- Some elements coming from the component's template, e.g. nav... -->

    <!-- The NG-CONTENT tag should be replaced by the original content: -->
    <p>Some article content</p>

    <!-- More elements coming from the component's template, e.g. footer... -->

  </my-app>
</body>

my-app的組件將如下所示：

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

@Component({
  selector: 'my-app',
  template: `
    <!-- navbar elements -->

    <ng-content></ng-content>

    <!-- footer elements -->
  `,
})
export class AppComponent  {}

如何從根元素獲取下載的內容數據？角度2

問題描述

2 個解決方案

解決方案1
1 已采納 2017-01-19 20:44:05

解決方案2
0 2017-01-19 19:07:34

如何從根元素獲取下載的內容數據？ 角度2

問題描述

2 個解決方案

解決方案1 1 已采納 2017-01-19 20:44:05

解決方案2 0 2017-01-19 19:07:34

如何從根元素獲取下載的內容數據？角度2

解決方案1
1 已采納 2017-01-19 20:44:05

解決方案2
0 2017-01-19 19:07:34