显示“材质”对话框时,角度路线意外更改

时间:2019-05-19 12:55:33

标签: angular angular-material angular7

我创建了一个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>

0 个答案:

没有答案