如何通过单击Angular 7中的按钮加载零部件

我想在单击表中的一行时加载组件。你可以看到我的桌子。 我将此表设置为好像单击的行警报将显示为

此行已单击

。 我用它来检查行点击是否有效。因此，现在我可以说它正在发挥作用

但实际上我想通过打开一个组件并在其中显示单击的相关行的详细信息。

我的代码如下，我在

finished

组件中使用此表

整理组件.ts

import { Component, OnInit } from '@angular/core';
import { Finished } from './finished.model';
import { FinishedService } from './finished.service';

@Component({
selector: 'ngx-finished',
styles: [],
template: `
    <ng2-smart-table
    [settings]="settings"
    (userRowSelect)="onCustomAction($event)"
    [source]="list"
    ></ng2-smart-table>
`
})
export class FinishedComponent implements OnInit {
    list: Finished[] = [];
    constructor(private service: FinishedService) {}

    ngOnInit() {
        this.service.getPatients().subscribe(actionArray => {
        let patients_data = actionArray.payload.get('data');
        if (patients_data) {
            this.list = patients_data;
        }
        });
    }

    settings = {
        add: {
            addButtonContent: '<i class="nb-plus"></i>',
            createButtonContent: '<i class="nb-checkmark"></i>',
            cancelButtonContent: '<i class="nb-close"></i>',
            confirmCreate: true
        },
        edit: {
            editButtonContent: '<i class="nb-edit"></i>',
            saveButtonContent: '<i class="nb-checkmark"></i>',
            cancelButtonContent: '<i class="nb-close"></i>',
            confirmSave: true
        },
        delete: {
            deleteButtonContent: '<i class="nb-trash"></i>',
            confirmDelete: true
        },
        view: {
            viewButtonContent: ''
        },

        columns: {
            nic: {
                title: 'NIC'
            },
            name: {
                title: 'Name'
            },
            address: {
                title: 'Address'
            },
            email: {
                title: 'Email'
            },
            haircolor: {
                title: 'Hair Color'
            }
        }
    };


    onCustomAction(event) {
        alert(`THIS ROW HAS CLICKED`);

    }
}

---

为此，必须使用路由。为此，必须遵循以下步骤

首先，在应用程序中生成路由

$ ng g module app-routing

这是路由的一个示例，默认情况下有一个主组件，如果使用路由/元素，则有一个元素组件

import { HomeComponent,ElementComponent} from './components';


const appRoutes: Routes = [ 
  { path: 'element', component: ElementComponent }, 
  { path: 'home',  component: HomeComponent },
  { path: '', redirectTo: '/home', pathMatch: 'full' }
];
@NgModule({ 
  imports: [ 
    RouterModule.forRoot( 
      appRoutes,
      { enableTracing: true } // <-- debugging purposes only 
    ) // other imports here 
  ], 
  ... 
}) 
export class AppModule { }

在主组件中，我们必须在app.component.html中调用路由组件

<router-outlet></router-outlet>

---

如果要在同一页上显示行详细信息而不使用布线，也可以使用“角度材质”模式。以下是链接-

---

定义“调用组件”。是否要导航到应用程序的另一页，显示另一个组件？然后阅读有关路线的指南？你知道在屏幕截图中显示一个模态对话框吗？然后选择具有模态组件的库并阅读其文档。是否要显示另一个组件？即精加工组件模板的模板（例如，下表），然后在模板中添加该组件的选择器，并根据是否单击某行使用ngIf显示该组件。上面提到的组件是什么？只是显示信息是新组件吗？是的，我的意思是关于只显示信息的新组件看看这个：如果它另外包含一个代码示例，这将是一个更有用的答案。提供一个链接很好，但是答案应该是独立的，即使稍后链接指向的页面被删除或重命名（这是经常发生的）。你介意用一个这样使用角材料模型的例子来更新这个吗？

import { AppRoutingModule } from './app-routing/app-routing.module'; 

imports: [ BrowserModule, NgbModule, AppRoutingModule, ]

<router-outlet></router-outlet>

import { Component } from '@angular/core'; 
import { Router } from '@angular/router';

export class HomeComponent { 
  constructor( private router: Router ) {} 

  onCustomAction(event) { 
    this.router.navigate(['/element'])
      .then(success => console.log('navigation success?' , success))
      .catch(console.error); 
  } 
}