Question

我想设置一个SampleData并将其发送到Angular中的Parent Component。当子组件完全位于父组件内部时，它可以正常工作。

但是，我想通过路由在父组件中设置不同的子组件。

所以我将放在parent.component.html中，并且子组件的调用方式如下：

{ path: "sample1", component: Sample1Component }

谁能看到我的代码并给我解决方案...？

中心组件将是父组件，而Sample1组件将是子组件。

您可以下载代码以查看来自Here的更多详细信息

app.router.module.ts

const AppRoutes: Routes = [
  { path: "", redirectTo: "/", pathMatch: "full" }, 
  { path: "sample1", component: Sample1Component },
  { path: "**", redirectTo: "/", pathMatch: "full" } 
];

center.component.html

<div (sampleEvent)="SampleData = $event">
  Center Area Title from Sample 1 : {{ SampleData }}
</div>

<!--if sample 1 Component is called by this Router, 'Center Area Title value does not change -->
<router-outlet></router-outlet>

<!-- if sample 1 Component is called by below, 'Center Area Title value changes-->
<!-- <app-sample1 (sampleEvent)="SampleData = $event"></app-sample1> -->

sample1.component.html

<input type="text" placeholder="Center Area Title" #sampleTitle (keyup)="onChange(sampleTitle.value)"  />

sample1.component.ts

export class Sample1Component implements OnInit {
  @Output("sampleEvent") sampleEvent = new EventEmitter();

  onChange(value) {
    console.log(value);
    this.sampleEvent.emit(value);
  }

  constructor() {}
  ngOnInit() {}
}

请有人在这里帮我。...

Answer 1

路由组件与包含RouterOutlet（<router-outlet>）的组件没有固有关系。可能找到一种通过RouterOutlet从路由组件发出数据的方法，但这不是解决此问题的规范方法。一种更常规的解决方案是使用外部单例（服务），其中包含可观察变量，该可观察变量用于在没有直接继承关系的组件之间传输数据。

使用事件的@Injectable()字段创建Subject服务类
将此服务添加到模块提供者
将此服务同时注入路由组件（Sample1Component）和容器组件（CenterComponent）
收听对容器组件（CenterComponent）中可观察字段的更改
在路线部分（Sample1Component）中发出对可观察主题的更改

角度-如何通过路由将数据从子组件发送到父组件？

1 个答案: