代码之家 › 专栏 › 技术社区 › nightingale2k1

将RouterLink传递给子组件

angular7 angular6 angular

0

nightingale2k1 · 技术社区 · 6 年前

我在我的共享模块中创建了一个组件,它是头组件,所以在我的所有组件中,我想调用它。

在我的共享组件中,让我们称之为app header组件,我想接受输入标题:string、buttonname:string和buttonlink:any(因为我很困惑) 我的组件:

import { Component, OnInit, Input } from '@angular/core';
import { RouterLink } from '@angular/router';

@Component({
  selector: 'app-app-header',
  templateUrl: './app-header.component.html',
  styleUrls: ['./app-header.component.less']
})
export class AppHeaderComponent implements OnInit {
    @Input() title: string;
    @Input() buttonName: string; 
    @Input() buttonLink: any;

  constructor() { }

  ngOnInit() {
  }

}

我的app.header.html

<div class='row border-bottom my-4 align-middle apptitle'>
    <div class="col-8 my-2">
      <div>
        <h3> {{title}}</h3>
      </div>
    </div>
    <div class="col-4 my-2 text-right">
      <button class="btn btn-primary pull-right" [routerLink]={{buttonLink}}>{{buttonName}}</button>
    </div>
  </div>

我通过在我的其他组件中使用此组件:

我的共享模块:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedComponent } from './shared.component';
import { AppHeaderComponent } from './app-header/app-header.component';

@NgModule({
  imports: [
    CommonModule,
  ],
  providers: [],
  declarations: [
      SharedComponent, 
    AppHeaderComponent],
  exports:[
      AppHeaderComponent,
  ]
})
export class SharedModule { }

我的问题是我不知道如何通过链接,这样路由器链接就可以工作了。知道如何以正确的方式通过链路/路由器链路吗?路由属于调用它的组件模块。

我有许多延迟加载的模块将使用这个共享组件。所以我猜路由应该能够从它的调用者组件模块重定向/调用链接。

编辑:添加更多信息

共享模块:AppHeaderComponent(这没有路由)

adminmodule:admincomponent->在内部调用appheadercomponent(adminmodule有路由)

用户模块:用户组件->在内部调用AppHeaderComponent(用户模块具有路由)

我需要AppHeaderComponent链接到正确的RouteLink。

例子: 在用户组件中:

<app-app-header
    [title]= "'Users'"
    [buttonName]="'Create New'"
    [buttonLink]="['/user/create']"
></app-app-header>

2 回复 | 直到 6 年前

1

0

Roman Skydan 6 年前

我想你需要稍微改变一下你的代码。您需要使用另一个构造来传递链接。[路由器链接]=“buttonLink”。

关于模板表达式和插值的更多信息 official documentation of angular

2

0

SiddAjmera 6 年前

使路由在您的 SharedModule ,您还必须添加 RouterModule 给你的 imports 数组。

...
import { RouterModule } from '@angular/router';

@NgModule({
  imports: [
    CommonModule,
    RouterModule
  ],
  ...
})
export class SharedModule {}

还有,在你的 HeaderComponent ,您需要修复 routerLink 工作分配:

...
<button 
  class="btn btn-primary pull-right" 
  [routerLink]="buttonLink">
  {{buttonName}}
</button>
...

您应该像这样使用这个组件(没有 [] ):

<app-app-header 
  [title]="'Organisations'" 
  [buttonName]="'Create New'" 
  [buttonLink]="'/admin/user/create'">
</app-app-header>