这是我的模态HTML，它基本上在一个模态中呈现一个帖子，并有一个关闭帖子的模式（模态）。下面是两个用于调用open方法来显示对话框的打字稿文件 - home.post.component.html
<div class="modal" style="width:780px; height: 500px; padding-bottom:20px;">
<button type="button" class="btn btn-default" (click)="dialogRef.close()">Close</button>
<div fxLayout="column">
<div class="text-larger border-bottom-light-gray" style="padding-bottom:8px" [innerHTML]="post.title.rendered | keepHtml"><span style="font-size:0.500em;" class="pull-right">by Spoke Team</span></div>
</div>
<div fxLayout="row">
<div fxFlex="75">
<div class="margin-top-30" style="margin-right: 24px;">
<div class="margin-top-10" style="overflow:auto; margin-bottom:20px">
<div id="post-content" [innerHTML]="post.content.rendered | keepHtml"></div>
</div>
</div>
</div>
<div fxFlex="25" class="border-left-light-gray">
<div class="margin-top-30" style="margin-left: 24px;">
<div class="margin-top-10" style="overflow:auto; margin-bottom:20px">
<div style="font-weight:600"> Related Posts </div>
</div>
</div>
</div>
</div>
</div>
home.component.html - 父视图
<div fxLayout="row" style="padding:0px; overflow: hidden;" class="bg-color-blue animated fadeIn" id="section1">
<div fxFlex="70" fxFlex.xs="100" style="margin: auto;">
<div fxLayout="row" fxLayout.lt-lg="column" style="margin-top:20px; padding-right:8px; padding-left:5px; padding-bottom:15px">
<div fxLayout="column" fxFlex="55" style="width:100%; padding-right:8px; padding-left:8px;" *ngFor="let post of cover.highlight">
<div fxFlex="50" style="width:100%; margin-bottom: 0.5625rem;" *ngFor="let post of cover.highlight">
<md-card style="padding:0px !important;" (click)="openPost(post.id)" class="cursor-pointer animated fadeIn wow" data-wow-offset="2.0s">
<div class="stretchy-wrapper text-title" style="font-size:1.000em; color: white" [ngStyle]="{'background-image': 'url(' + post.featured_media_url + ')', 'background-position': 'center', 'background-size': '100vh', 'background-repeat': 'no-repeat', 'background-color': 'black'}">
<div class="stretchy-wrapper bx overlay-post">
<div [innerHTML]="post.title.rendered | keepHtml" class="overlay-post-title"></div>
</div>
</div>
</md-card>
</div>
</div>
<div fxLayout="column"fxFlex="45">
<div fxLayout="row" fxLayout.lt-sm="column">
<div fxFlex="50" style="width:100%; padding-right:8px; padding-left:8px; margin-bottom: 0.5625rem;" *ngFor="let post of cover.rowOne">
<md-card style="padding:0px !important;" (click)="openPost(post.id)" class="cursor-pointer animated fadeIn">
<div class="stretchy-wrapper text-title" style="font-size:1.000em; color: white" [ngStyle]="{'background-image': 'url(' + post.featured_media_url + ')', 'background-position': 'center', 'background-size': '100vh', 'background-repeat': 'no-repeat', 'background-color': 'black'}">
<div class="stretchy-wrapper bx overlay-post">
<div [innerHTML]="post.title.rendered | keepHtml" class="overlay-post-title"></div>
</div>
</div>
</md-card>
</div>
</div>
<div fxLayout="row" fxLayout.lt-sm="column">
<div fxFlex="50" style="width:100%; padding-right:8px; padding-left:8px;" *ngFor="let post of cover.rowTwo">
<md-card style="padding:0px !important;" (click)="openPost(post.id)" class="cursor-pointer animated fadeIn">
<div class="stretchy-wrapper text-title" style="font-size:1.000em; color: white" [ngStyle]="{'background-image': 'url(' + post.featured_media_url + ')', 'background-position': 'center', 'background-size': '100vh', 'background-repeat': 'no-repeat', 'background-color': 'black'}">
<div class="stretchy-wrapper bx overlay-post">
<div [innerHTML]="post.title.rendered | keepHtml" class="overlay-post-title"></div>
</div>
</div>
</md-card>
</div>
</div>
</div>
</div>
</div>
</div>
<div fxLayout="row" style="padding:0px; overflow: hidden; margin-top:40px;" id="section2" class="animated fadeInTop">
<div fxFlex="70" fxFlex.xs="100" style="margin: auto;">
<div *ngFor="let array of data; let i = index" fxLayout="column" class="animated fadeIn">
<div *ngIf="i==2">
<h1>SpokeOnline on YouTube</h1>
<iframe width="100%" height="600" src="https://www.youtube.com/embed/videoseries?list=PLGDMIYpr-Oq6L6dsHFxkHHs5-_AzBgSuX" frameborder="0" allowfullscreen></iframe>
</div>
<div style="margin-left: 40px" class="cat-title animated fadeIn" [id]="array.name">{{array.name}}</div>
<div (mouseenter)='mouseEnter(array.name)' (mouseleave)='mouseLeave("")' fxFlex="auto">
<div fxLayout="row">
<div style="width:100%; margin: auto;">
<div fxLayout="row" fxLayout.xs="column" fxLayoutWrap="wrap" fxLayoutGap="auto" fxLayoutGap.xs="0">
<div fxFlex="2" class="post-item-arrow">
<div *ngIf="leftArrow >0 && arrow===array.name" class="post-item-arrow-navigate cursor-pointer " (click)="loadPrevious()"><i class="material-icons" style="font-size: 36px">keyboard_arrow_left</i></div>
</div>
<div fxFlex="auto" fxFlex.gt-xs="50%" [fxFlex.gt-md]="30" *ngFor="let post of array.posts">
<md-card style="padding:0px !important; margin:15px;" (click)="openPost(post.id)" class="cursor-pointer animated fadeInRight wow" data-wow-delay="0.4s">
<div class="stretchy-wrapper text-title" style="font-size:1.000em; color: white" [ngStyle]="{'background-image': 'url(' + post.featured_media_url + ')', 'background-position': 'center', 'background-size': '100vh', 'background-repeat': 'no-repeat', 'background-color': 'black'}">
<div class="stretchy-wrapper bx overlay-post">
<h3 [innerHTML]="post.title.rendered | keepHtml" class="overlay-post-title"></h3>
</div>
</div>
</md-card>
</div>
<div fxFlex="2" class="post-item-arrow">
<div *ngIf="arrow ===array.name" class="post-item-arrow-navigate cursor-pointer " (click)="loadMore()"><i class="material-icons" style="font-size: 36px">keyboard_arrow_right</i></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="feed">
<h1>SpokeOnline on Twitter</h1>
<a class="twitter-timeline" data-height="600" href="https://twitter.com/SpokeOnline">Tweets by SpokeOnline</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
</div>
</div>
<!--<div style="padding:0px; margin-top: 40px;" class="animated fadeIn wow" data-wow-offset="2.0s">-->
<!--<!–<div fxFlex="70" fxFlex.xs="100" style="margin: auto;">–>-->
<!--<!–<div fxFlex="34" style="margin-right:30px;">–>-->
<!--<!–<a class="twitter-timeline" href="https://twitter.com/SpokeOnline">Tweets by SpokeOnline</a>–>-->
<!--<!–</div>–>-->
<!--<!–<div fxFlex="66">–>-->
<!--<!–<iframe width="100%" height="600" src="https://www.youtube.com/embed/videoseries?list=PLGDMIYpr-Oq6L6dsHFxkHHs5-_AzBgSuX" frameborder="0" allowfullscreen></iframe>–>-->
<!--<!–</div>–>-->
<!--<!–</div>–>-->
<!--<div>-->
<!--<h1>SpokeOnline on Twitter</h1>-->
<!--<a class="twitter-timeline" href="https://twitter.com/SpokeOnline">Tweets by SpokeOnline</a>-->
<!--</div>-->
<!--</div>-->
home.component.ts 我在这里初始化并在dialogRef上调用.open（）。这是父视图的打字稿文件。
import { Component, OnInit, ViewChild, HostBinding, HostListener } from '@angular/core';
import { MdDialogRef, MdDialog, MdDialogConfig } from '@angular/material';
import { FormBuilder, FormGroup } from '@angular/forms';
import { HomeService } from './home.service'
import { DomSanitizer, SafeResourceUrl, SafeUrl } from '@angular/platform-browser';
import { fadeInOutAnimation } from '../_animations/index';
import { HomePostComponent } from './home.post.component'
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css'],
providers: [HomeService],
animations: [fadeInOutAnimation]
})
export class HomeComponent implements OnInit {
public arrow ;
public leftArrow = 0;
@HostBinding('@fadeInOutAnimation') fadeInOutAnimation = true;
category: any;
// video: any = {id: 'wzrnuUOoFNM'};
// baseUrl:string = 'https://www.youtube.com/embed/';
load: any = { per_page: 3, offset: 0, more: 3 };
cover = { highlight: [], rowOne: [], rowTwo: [] }; // Array which contains last published pots in the json form. // ** We still have to make it display the posts most viewed instead of the last posts published **
posts = { sports: [], entertainment: [] };
post: any; // Variable related to when a single post is to be displayed
private mediaContentUrl = "http://spoketest.wordpress.com/wp-content/uploads/"; // Base link to fetch media content
buttonCount = { sports: 0, entertainment: 0 }; // to count next/back loading of next or previous posts in different categories
constructor(private service: HomeService, private sanitizer: DomSanitizer, public dialog: MdDialog) {
// this.url = this.sanitizer.bypassSecurityTrustResourceUrl(this.baseUrl + this.video.id);
}
getCover() {
this.service.getCoverHighlight().subscribe(data => this.cover.highlight = data);
this.service.getCoverRowOne().subscribe(data => this.cover.rowOne = data);
this.service.getCoverRowTwo().subscribe(data => this.cover.rowTwo = data);
}
openPost(id) {
this.service.getPostId(id);
this.service.getPost().subscribe(data => this.post = data);
this.openDialog(id);
}
openDialog(id) {
let config = new MdDialogConfig();
let dialogRef:MdDialogRef<HomePostComponent> = this.dialog.open(HomePostComponent, config);
dialogRef.componentInstance.id = id;
}
getPostId(id) {
this.service.getPostId(id);
}
getPost(){
this.service.getPost().subscribe(data => this.post = data);
}
data: any[]; // empty array to store initial data from all categories
getData(){
this.service.getCategories(this.load.per_page).subscribe(data => {
this.data = data;
this.category = this.data[1];
});
}
// getBackgroundImage() {
// const backgroundImage = "./conestoga.jpg";
// const style = `background-image: url(${backgroundImage})`;
// return this.sanitizer.bypassSecurityTrustHtml(style);
// }
loadMore() {
this.leftArrow = this.leftArrow + 1;
console.log(this.leftArrow);
// this.service.getData(this.category.id, this.category.offset, this.load.more).subscribe(data => {
// this.category.posts.push(data);
// this.category.offset += this.load.more;
// });
}
loadPrevious() {
this.leftArrow = this.leftArrow - 1;
console.log(this.leftArrow);
// this.service.getData(this.category.id, this.category.offset, this.load.more).subscribe(data => {
// this.category.posts.push(data);
// this.category.offset += this.load.more;
// });
}
ngOnInit() {
this.getCover();
this.getData();
}
mouseEnter(name) {
this.arrow = name;
console.log(this.arrow);
}
mouseLeave(name) {
this.arrow = name;
console.log(this.arrow);
}
}
home.post.component.ts 这是模态打字稿文件
import {Component, EventEmitter, Input, NgModule, OnInit, Output, ViewChild} from '@angular/core';
import { MdDialogRef, MdDialog, MdDialogConfig } from '@angular/material';
import { HomeService } from './home.service';
import { Observable } from 'rxjs/Rx';
@Component({
moduleId: module.id,
selector: 'home-post-component',
providers: [HomeService],
templateUrl: 'home.post.component.html'
})
export class HomePostComponent implements OnInit {
loading: boolean = true;
post;
id;
constructor( private service: HomeService, public dialogRef: MdDialogRef<HomePostComponent> ) { }
openPost(id) {
this.id = this.service.getPostId(id);
this.service.getPost().subscribe(resData => this.post = resData);
}
ngOnInit() {
this.openPost(this.id);
}
}