Question

我有app.component，如下所示

/*// 

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

import { DndComponent } from './dnd/dnd.component';

@Component({

  selector: 'app-root',

  template: ' (click)="sample()"',

  styleUrls: ['./app.component.css'],

})

export class AppComponent {

constructor(public ob:DndComponent) {

}

sample(){

this.ob.changevar();
}

}


/*//

和，我有另一个像

这样的dnd组件

/*//

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

@Component({

  selector: 'dnd',

  template: '<div>{{name}}</div>',

  styleUrls: ['../app.component.css']

})

export class DndComponent {

name:string="saran"

constructor(){ 

}

changevar(){

this.name="kumar";
}

}

/*//

这里，我试图通过从另一个组件调用方法来更改名称值。名称值正在更新，但视图未呈现。

有没有办法用另一个组件的点击方法动态渲染其他组件视图。

谢谢，

Answer 1

如果要在另一个组件中的某个事件的触发器上调用一个组件中的函数，则可以使用事件绑定。在这里查看我的答案Call function from one component to another component Angularjs 2。

只有当一个组件是另一个组件的一部分时，才能执行此操作。这对两个独立组件无效。如果您正在寻找此案例，请在说明中澄清。

Answer 2

我对你的问题不太清楚，但基于此

有没有办法动态渲染其他组件视图来自其他组件的点击方法。

app.component.ts

import { Component } from '@angular/core';
import { Router } from '@angular/router'; 
import { DndComponent } from './dnd/dnd.component';

@Component({

  selector: 'app-root',

  template: ' (click)="sample()"',

  styleUrls: ['./app.component.css'],

})

export class AppComponent {

constructor(public ob:DndComponent, private router: Router) {

}

sample(){
this.router.navigate['/Dnd']
//this.ob.changevar();
}

}

app.routing.ts

import { Routes, RouterModule, CanActivate} from '@angular/router';
import { PublicDealsComponent } from './public-deals.component';
import { DndComponent } from './dnd/dnd.component';
import { AppComponent } from './app.component';


const appRoutes: Routes = [
  // Add the redirect
  {
    path: '',
    redirectTo: '/appComponent',
    pathMatch: 'full',

  },
  {
    path: 'appComponent',
    component: AppComponent 
  },
  {
    path: 'Dnd',
    component: DndComponent ,

  },

];

export const routing = RouterModule.forRoot(appRoutes);

export const routedComponents = [AppComponent , DndComponent ];

如何在angular4中从另一个组件调用函数时呈现组件的视图

2 个答案: