- Components
- WordpressPostComponent
File
Implements
Metadata
selector |
ab-wordpress-post |
template |
<div *ngIf="post" class="post post-type-{{ post.type }} clearfix" post="post" id="post-{{ post.id }}">
<h3 *ngIf="trustedTitle" class="title" [innerHTML]="trustedTitle"></h3>
<div [ngSwitch]="post.type">
<ng-container *ngSwitchDefault>
<div *ngIf="trustedContent" [innerHTML]="trustedContent" class="content"></div>
</ng-container>
<ng-container *ngSwitchCase="'iframe'">
<iframe [src]="trustedUrl" width="{{ post.width }}" height="{{ post.height }}" frameborder="0" style="visibility:hidden;" onload="this.style.visibility='visible';" allowtransparency=”true”></iframe>
</ng-container>
<ng-container *ngSwitchCase="'app'">
<iframe [src]="trustedUrl" width="{{ post.width }}" height="{{ post.height }}" frameborder="0" style="visibility:hidden;" onload="this.style.visibility='visible';" allowtransparency=”true”></iframe>
<script>
var app_server_app_data = {{ post.json | json }}
</script>
</ng-container>
</div>
</div>
|
Index
Properties
|
|
Methods
|
|
Inputs
|
|
options
|
Type: any
Default value: {title: true}
|
|
Methods
ngOnChanges
|
ngOnChanges(changes: )
|
|
|
Public
postData
|
postData: any
|
Type : any
|
|
import { Component, Input, OnChanges } from '@angular/core';
import { DomSanitizer, SafeHtml, SafeResourceUrl } from '@angular/platform-browser';
@Component({
selector: 'ab-wordpress-post',
template: `
<div *ngIf="post" class="post post-type-{{ post.type }} clearfix" post="post" id="post-{{ post.id }}">
<h3 *ngIf="trustedTitle" class="title" [innerHTML]="trustedTitle"></h3>
<div [ngSwitch]="post.type">
<ng-container *ngSwitchDefault>
<div *ngIf="trustedContent" [innerHTML]="trustedContent" class="content"></div>
</ng-container>
<ng-container *ngSwitchCase="'iframe'">
<iframe [src]="trustedUrl" width="{{ post.width }}" height="{{ post.height }}" frameborder="0" style="visibility:hidden;" onload="this.style.visibility='visible';" allowtransparency=”true”></iframe>
</ng-container>
<ng-container *ngSwitchCase="'app'">
<iframe [src]="trustedUrl" width="{{ post.width }}" height="{{ post.height }}" frameborder="0" style="visibility:hidden;" onload="this.style.visibility='visible';" allowtransparency=”true”></iframe>
<script>
var app_server_app_data = {{ post.json | json }}
</script>
</ng-container>
</div>
</div>
`
})
export class WordpressPostComponent implements OnChanges {
@Input() options: any = {title: true};
@Input() post: any;
public trustedTitle: SafeHtml;
public trustedContent: SafeHtml;
public trustedUrl: SafeResourceUrl;
public postData: any;
constructor(private _sanitizer: DomSanitizer) { }
parse(post) {
if (post.title) {
this.trustedTitle = this._sanitizer.bypassSecurityTrustHtml(post.title.rendered);
}
if (post.content) {
this.trustedContent = this._sanitizer.bypassSecurityTrustHtml(post.content.rendered);
}
if (post.url) {
this.trustedUrl = this._sanitizer.bypassSecurityTrustResourceUrl(post.url);
}
switch (post.type) {
case 'app':
this.postData = JSON.parse(post.json);
break;
case 'iframe':
// code block
break;
default:
// code block
}
}
// trustAsHtml(content) {
// console.log('trustAsHtml');
// return this._sanitizer.bypassSecurityTrustHtml(content);
// };
// trustAsUrl(url) {
// console.log('trustAsUrl',url);
// return this._sanitizer.bypassSecurityTrustResourceUrl(url);
// };
ngOnChanges(changes) {
if (!this.post) {
return;
}
this.parse(this.post);
}
}
Legend
Html element with directive
'
var COMPONENTS = [{'name': 'AboutComponent', 'selector': 'sk-about'},{'name': 'DevStackComponent', 'selector': 'sk-dev-stack'},{'name': 'DrupalMenuComponent', 'selector': 'ab-drupal-menu'},{'name': 'IndexComponent', 'selector': 'sk-index'},{'name': 'LoginButtonComponent', 'selector': 'ab-login-button'},{'name': 'LoginComponent', 'selector': 'ab-login'},{'name': 'LoginFormComponent', 'selector': 'ab-login-form'},{'name': 'LoginModalComponent', 'selector': 'app-login-modal'},{'name': 'ModalContentComponent', 'selector': 'app-modal-content'},{'name': 'NodeComponent', 'selector': 'ab-drupal-entity-node'},{'name': 'NodeEditorComponent', 'selector': 'ab-drupal-entity-node-editor'},{'name': 'RouterBreadcrumbComponent', 'selector': 'ab-router-breadcrumb'},{'name': 'RouterMenuComponent', 'selector': 'ab-router-menu'},{'name': 'SpinnerComponent', 'selector': 'ab-spinner'},{'name': 'SplashComponent', 'selector': 'sk-splash'},{'name': 'SvgTemplateComponent', 'selector': 'svg-template'},{'name': 'TestComponent', 'selector': 'test'},{'name': 'UserComponent', 'selector': 'ab-user'},{'name': 'WordpressMenuComponent', 'selector': 'ab-wordpress-menu'},{'name': 'WordpressPostComponent', 'selector': 'ab-wordpress-post'}];
var DIRECTIVES = [{'name': 'EmailValidatorDirective', 'selector': '[validateEmail][ngModel],[validateEmail][formControlName],[validateEmail][formControl]'},{'name': 'SampleDirective', 'selector': '[sampleDirective]'}];
var ACTUAL_COMPONENT = {'name': 'WordpressPostComponent'};