如何通过单击Angular 7中的按钮来加载组件

Question

我想在点击表格的一行时加载一个组件。你可以看到我的桌子。我把这张桌子做好了，好像一行点击警告会显示为THIS ROW HAS CLICKED。我用它来检查天气行点击是否正常工作。因此，现在我可以说它正在发挥作用。

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

我的代码如下，我在finished组件中使用此表。

finishing.component.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`);

    }
}

我想在onCustomAction函数中调用上面提到的组件。

onCustomAction(event) {
    I want to invoke the above mentioned component in here.
}

Answer 1

为此，您必须使用路由。为此，您必须执行以下步骤。

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

$ ng g module app-routing

这是一个路由示例，默认情况下为Home组件，如果使用route /元素，则为Element组件

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.module.ts文件以添加对路由的引用

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

imports: [ BrowserModule, NgbModule, AppRoutingModule, ]

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

<router-outlet></router-outlet>

现在我们只需要与Angular组件链接（例如在HomeComponent.ts中）

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); 
  } 
}