Angular Material2 MdDialog最后加载

时间:2017-04-28 21:50:55

标签: angular typescript modal-dialog angular-material

您好我正在使用angularMaterial2为typescript创建一个对话框,我可以生成对话框,但是页面末尾的这个加载不会超过其他类似的元素。

这是我的.TS

import { Component, OnInit, Input } from '@angular/core';
import {Sponsor} from '../entitys/sponsor'
import {MdDialog, MdDialogRef} from '@angular/material';

@Component({
  selector: '[sponsor-tile]',
  templateUrl: './sponsor-tile.component.html',
  styleUrls: ['./sponsor-tile.component.css']
})

export class SponsorTileComponent implements OnInit {

  @Input() sponsor: Sponsor;

  constructor(public dialog: MdDialog) {}

  ngOnInit() {
    console.log(this.sponsor);
  }

  descModal(): void{
    let dialogRef = this.dialog.open(DialogSponsorTileComponent);
    dialogRef.afterClosed().subscribe(result => {
      console.log(result);
    });
  }

}

@Component({
  selector: 'dialog-sponsor-tile',
  templateUrl: './dialog-sponsor-tile.html'
})
export class DialogSponsorTileComponent{
  constructor(public dialogRef: MdDialogRef<DialogSponsorTileComponent>){}
}

和我的HTML:

<img src="{{sponsor.Logoogo}}" class="speaker-img">
<h3>{{sponsor.Name}}</h3>
<p (click)="descModal()" >{{sponsor.Description}}</p>
<ul class="speaker-social">
  <li *ngIf="sponsor.Facebook !== null" ><a href="{{sponsor.Facebook}}"><span class="ti-facebook"></span></a></li>
  <li *ngIf="sponsor.Twitter !== null" ><a href="{{sponsor.Twitter}}"><span class="ti-twitter-alt"></span></a></li>
  <li *ngIf="sponsor.Linkedin !== null" ><a href="{{sponsor.Linkedin}}"><span class="ti-linkedin"></span></a></li>
</ul>

对话框的HTML:

<h1 md-dialog-title>Dialog</h1>
<div md-dialog-content>What would you like to do?</div>
<div md-dialog-actions>
  <button md-button (click)="dialogRef.close('Option 1')">Option 1</button>
  <button md-button (click)="dialogRef.close('Option 2')">Option 2</button>
</div>

我在material.angular.io

的例子中做了这个

1 个答案:

答案 0 :(得分:0)

我认为selector: 'sponsor-tile',

中不得有[]

就像这样:Http.get