Question

我使用父组件的HTML模板中的按钮路由到子组件。如何将父组件的数据（例如名称）传递给子组件？我不想在URL中显示数据（如果在[routerLink]中传递则显示-导航至子组件）

Answer 1

我从您的问题中了解到的是，您希望将数据从父路由发送到子路由，而不显示实际URL，也无需使用路由器链接来避免显示实际链接。如果是这样，您可以设计如下：-

在您的 html 中，您可以使用 bootstrap4 使用链接类型按钮，并且需要添加 onclick函数，如下所示：-

<button type="button" class="btn btn-link" (click)="gotochildroute()" >Link</button>

在 gotochildroute（）方法中，使用以下路由：-

this.route.navigate(['childroute'], {skipLocationChange: true});

如果您使用链接，则可以如下所示 skipLocationChange ：-

<a [routerLink]="['/childroute'}]" replaceUrl="false" skipLocationChange="true"> </a>

希望这会有所帮助。

Answer 2

尝试一般通过服务共享状态。

创建服务

@Injectable()
export class SomeService {
  data: string;
}

然后您可以将其包含在源组件和目标组件中。

@Component({
   ...
})
export class SourceComponent {
  constructor(private service: SomeService) {}

  onSomeAction() {
    service.data = "Some Data";
    // Route to your component.
  }
}

然后像这样消耗它：

@Component({
  ...
})
export class TargetComponent {
  data: string;
  constructor(private service: SomeService) {} 

  ngOnInit() {
    this.data = this.service.data;
  }
}

您还需要将SomeService添加到托管模块：

@NgModule({
  imports:      [ ... ],
  providers:    [ SomeService ],
  declarations: [ SourceComponent, TargetComponent ]
})

对于更复杂的东西，您可以查看https://ngxs.gitbook.io/ngxs之类的软件包，该软件包提供了一些强大的功能来处理angular中的状态管理。

Answer 3

如果子组件位于父组件内部，则可以将数据作为输入参数传递。在这里看看：https://angular.io/api/core/Input

在您的父组件中，设置要传递给子组件的数据，如下所示：

<child-component [inputdata]="yourDataObject">

其中“ inputdata”是可以选择的名称，而“ yourDataObject”是要传递给子组件的属性。在子组件中，您可以像这样检索数据：

@Input('inputdata') passedData;

当然，该名称必须与在父组件中传递的名称相同。

如何将数据传递给从父组件路由的子组件？

3 个答案: