Question

我正在尝试通过函数调用从另一个组件中调用一个组件。

在我的项目中，我总共有两个部分。

pages/component1/

pages/tables/maintables

如上所述，我总共在Angular 7中定义了两个组件。

现在在component1组件中，我有一个要从maintables组件中的另一个函数调用的函数。

下面是我如何在函数中调用组件的代码。

this.router.navigateByUrl('/component1');

但是上面的行无法正常工作。它没有重定向到component1组件。

有人可以帮助我从另一个组件调用另一个角度组件吗？

预先感谢！

Answer 1

我认为您需要创建app-routing.module.ts

在角度分量中，只能以<app-home></app-home>或<app-about></app-about>之类的HTML格式显示，也可以通过链接显示它们，但在app-routing.module.ts中将它们设置为路径并添加到app.module.ts。在app.component.html中，您得到了<router-outlet></router-outlet>，如果正确设置，它将被component取代，而不是在component.ts中使用函数，而使用<button routerLink="/home">

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

//////////////////

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AboutComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 2

现在所有问题都解决了，我将组件同时导入到app.routing.module和另一个模块中，该模块是我所有组件的父模块。

所以它解决了我的问题。

非常感谢大家的帮助。

切换到函数调用的另一个角度组件

2 个答案: