子组件向父组件传递参数

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 检索数据。

祝你好运！

子组件向父组件传递参数

Child component transmit parameter to parent

angular

angular5

angular6

angular7