Question

在Angular（v6）中，我尝试动态加载某些组件，并且已成功插入组件。

我遇到的问题是动态加载的组件，没有主要组件给他的样式。

基本上我希望父组件 app-root 上的所有组件 app-stuff 拥有5px保证金。

有没有办法实现这个目标？

我的代码如下所示：

主要组成部分：

import { Component, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
import { StuffComponent } from './StuffComponent';

@Component({
  selector: 'app-root',
  template: '<div class="componentList"><ng-container #testOutlet ></ng-container></div>',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {

  @ViewChild('replaceDiv', { read: ViewContainerRef }) replaceDiv: any;

  constructor() { }

  ngOnInit(): void {
    setTimeout(() => this.loadComponent(), 1000);
  }

  loadComponent() {
    const ref = this.replaceDiv.createComponent(StuffComponent);
  }

}

主要组件的样式：

.componentList {
    display: flex;
    flex-direction: row;
}

app-stuff
{
    margin:5px;
}

要插入的组件：

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

@Component({
  selector: 'app-stuff',
  template: '<p></p>',
  styleUrls: ['./stuff.component.scss'],
})
export class StuffComponent implements OnInit {
  constructor() {  }

  ngOnInit() { }

  print() {
    console.log('### stuff ###');
  }

}

Answer 1

这里的男人。你需要做穿孔CSS。您实际想要做的基本操作是将这个stuff.component.scss设置为：

devtools::install_github("thomasp85/patchwork")
library(patchwork)
x1 + x2 + x3 + x4 + plot_layout(ncol = 2)

我已经在github上发布了一个更新。

将样式应用于Angular 2+中父组件的动态加载组件

1 个答案: