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组件，如果使用路由/ element，则具有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); 
  } 
}

Answer 2

如果要在同一页面上显示行详细信息而不使用工艺路线，则也可以使用角度材料模态。链接在这里 - https://v8.material.angular.io/components/dialog/overview

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

2 个答案: