How to get downloaded content data from the root element? Angular2
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. So, There is content with < feature > Feature content < /feature > inside. 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.
I know there is < ng-content >, but this only works inside the root component.
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. So, I don't want to load the content with 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!
2 answers
solution1
1 ACCPTED 2017-01-19 20:44:05
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 {
}
solution2
0 2017-01-19 19:07:34
What if you put an <ng-content></ng-content> tag in the component's template? It should preserve - aka "project" - the original content, no?
BEFORE Angular compilation (this is the raw index.html returned by the server):
<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):
<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:
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<!-- navbar elements -->
<ng-content></ng-content>
<!-- footer elements -->
`,
})
export class AppComponent {}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.