如何从根元素获取下载的内容数据？角度2

Question

After hours of googling, I haven't succeeded with finding a solution. 经过数小时的谷歌搜索，我还没有成功找到解决方案。

I want to add a share functionality into an article. 我想在文章中添加共享功能。 Something like a wordpress shortcode. 类似于wordpress简码。 So, There is content with < feature > Feature content < /feature > inside. 因此，内部具有<功能>功能内容</ feature>的内容。 The article can have multiple features. 该文章可以具有多个功能。

Now, I understand that there must be a root element. 现在，我知道必须有一个根元素。 And this is where the problem rises. 这就是问题所在。 When I put the article inside < blog-app > < /blog-app > component, the content is overwritten with the component template. 当我将文章放在<blog-app> </ blog-app>组件中时，内容将被组件模板覆盖。

I know there is < ng-content >, but this only works inside the root component. 我知道有<ng-content>，但这仅在根组件内部有效。

I want to have the article content loaded with the page to let the search engines see the content even when no javascript is launched. 我希望文章内容随页面一起加载，即使没有启动javascript，搜索引擎也可以看到内容。 So, I don't want to load the content with REST API. 因此，我不想使用REST API加载内容。

How would you deal with it? 您将如何处理？ How should I read the original article and then how to put it inside the angular root element? 我应该如何阅读原始文章，然后如何将其放入角根元素中？

Thank you for your suggestions! 谢谢你的建议！

Answer 1

I found a little hack, but it might not work in all situations. 我发现了一点小技巧，但可能无法在所有情况下都起作用。

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

})

export class BlogAppComponent {

}

Answer 2

What if you put an <ng-content></ng-content> tag in the component's template? 如果在组件的模板中放置<ng-content></ng-content>标签怎么办？ It should preserve - aka "project" - the original content, no? 它应该保留-也称为“项目”-的原始内容，不是吗？

BEFORE Angular compilation (this is the raw index.html returned by the server): Angular编译之前（这是服务器返回的原始index.html ）：

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

AFTER Angular compilation (this is the page AFTER it has been compiled by Angular in the client's browser; this part wouldn't be executed if JavaScript was disabled in the client's browser): 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>

The component for my-app would then look something like this: 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