我创建了一个last-news
组件。此组件显示新闻列表。当用户单击每个标题时,将通过对话框显示新闻内容。我在主页和个人资料页面中使用此组件。在last-news
组件内部,我使用了另一个名为newsModal
的组件来显示一个对话框。
当我在主页上时。模态对话框工作正常。但是,当我想在配置文件页面(模块)中使用此组件时,会显示模式,但路由会自动从/profile
更改为/
!
我的模式组件:
import {Component, Inject} from '@angular/core';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';
export interface data {
news : any
}
@Component({
selector: 'modal-news',
templateUrl: 'modal-news.component.html',
styleUrls: ['./modal-news.component.scss']
})
export class ModalNews {
constructor(
public dialogRef: MatDialogRef<ModalNews>,
@Inject(MAT_DIALOG_DATA) public data: data) {}
onNoClick(): void {
this.dialogRef.close();
}
}
最新消息组件 :(我在此模块中使用了模式组件)
import {Component, Input, OnInit} from '@angular/core';
import {ModalNews} from "../modal-news/modal-news.component";
import {MatDialog} from "@angular/material";
@Component({
selector: 'app-latest-news',
templateUrl: './latest-news.component.html',
styleUrls: ['./latest-news.component.scss']
})
export class LatestNewsComponent implements OnInit {
constructor(private newsService: NewsService, private modal: MatDialog) {}
public news: any;
ngOnInit() {
this.newsService.getLastNews().subscribe((list) => {
this.news = list.news;
}, error => console.log(error) )
}
openModalNews(news): void {
const dialogRef = this.modal.open(ModalNews, {
width: '500px',
data : { news }
});
}
}
主页模块:(该模块正在使用模式)
import {ModalNews} from "../uielements/modal-news/modal-news.component";
@NgModule({
declarations: [
MainPageComponent
],
imports: [
MainRoutingModule,
UIElementsModule,
],
entryComponents: [ModalNews]
})
export class MainModule { }
个人资料页面模块:(模式在该模块中不起作用)
import {ModalNews} from "../uielements/modal-news/modal-news.component";
@NgModule({
declarations: [
ProfilePageComponent
],
imports: [
ProfileRoutingModule,
UIElementsModule,
],
entryComponents: [ModalNews]
})
export class ProfileModule { }
更新
latest-news.component.html:
<div class="latest-news-container">
<ul>
<li *ngFor="let n of news" >
<div class="story-container" (click)="show_modal ? openModalNews(n) : '' ">
<div class="story-title">{{ n['pre_title'] + '/' + n['title'] }}</div>
</div>
</li>
</ul>
</div>