Question

我希望NodeComponent将参数传输到LayoutComponent。

const routes: Routes = [{
    path: '',
    component: LayoutComponent,
    children: [{
      path: '',
      component: IndexComponent
    }, {
      path: 'node/:nodeId',
      component: NodeComponent
    }]
  }];

Answer 1

我假设您的LayoutComponent具有<router-outlet>占位符，它将根据路由器为您提供适当的组件。

在这种情况下，您无法将@Output从NodeComponent发送到LayoutComponent，但是可以轻松地通过service共享数据。

创建一个service，它将保留您的Node变量/逻辑并更新NodeComponent中的数据。这样，LayoutComponent将能够读取它。

示例：

@Injectable()
export class NodeService {

    // Feel free to define observables, other variables or object
    nodeTitle: string;
    nodeBtnEvent: Event;

    setNodeData(nodeTitle, event, ...){
        // Assign the variables or do something
    }     

    getNodeData() {
       return { 
           nodeTitle,
           nodeBtnEvent
       }
    }

    constructor() {}

}

使用setter从NodeComponent中添加数据，并使用getter从LayoutComponent中获取数据。

祝你好运！

子组件将参数传递给父组件

1 个答案: