Question

我正在使用动态视图开发角度应用程序。因此，用户可以自定义他们选择的视图（查看/不查看）。定制部分可以轻松完成，但是数据视图部分很难做到（或者我无法弄清楚）。我想加载多个动态组件并加载其数据（例如，如果要在该动态组件内选择标签，则要加载其选项数据并将该组件添加到我的主要组件中）。另一件事是我想检查哪些动态组件要加载到主组件。可能吗？有人做过吗？

Answer 1

也许您正在寻找：

有条件导入-这是一个webpack插件，用于：https://www.npmjs.com/package/webpack-conditional-loader

动态导入- https://medium.com/front-end-weekly/webpack-and-dynamic-imports-doing-it-right-72549ff49234

export default function pageLoader(platform) {
   switch (platform="desktop") {
     case "mobile":
       return import("components/MyMobileComponent");

     case "desktop":
       return import("components/MyDesktopComponent");
   }
}

Answer 2

我希望这个帮助：

app.component.ts：

    TASK [nexus3-oss : Check if SystemD service is installed] **********************
    task path: /projects/ansible/nexus3-oss/tasks/main.yml:13
    <nexus3-oss-debian-stretch> ESTABLISH DOCKER CONNECTION FOR USER: root
    <nexus3-oss-debian-stretch> EXEC ['/usr/bin/docker', b'exec', b'-i', 'nexus3-oss-debian-stretch', '/bin/sh', '-c', "/bin/sh -c 'echo ~ && sleep 0'"]
    <nexus3-oss-debian-stretch> EXEC ['/usr/bin/docker', b'exec', b'-i', 'nexus3-oss-debian-stretch', '/bin/sh', '-c', '/bin/sh -c \'( umask 77 && mkdir -p "` echo /home/deployuser/.ansible/tmp/ansible-tmp-1555848182.1761565-31974482443721 `" && echo ansible-tmp-1555848182.1761565-31974482443721="` echo /deployuser/.ansible/tmp/ansible-tmp-1555848182.1761565-31974482443721 `" ) && sleep 0\'']
    Using module file /home/localuser/.local/lib/python3.6/site-packages/ansible/modules/files/stat.py
    <nexus3-oss-debian-stretch> PUT /home/localuser/.ansible/tmp/ansible-local-30458wt820190/tmpq2vjarrv TO /home/deployuser/.ansible/tmp/ansible-tmp-1555848182.1761565-31974482443721/AnsiballZ_stat.py
    <nexus3-oss-debian-stretch> EXEC ['/usr/bin/docker', b'exec', b'-i', 'nexus3-oss-debian-stretch', '/bin/sh', '-c', "/bin/sh -c 'chmod u+x /home/deployuser/.ansible/tmp/ansible-tmp-1555848182.1761565-31974482443721/ /home/deployuser/.ansible/tmp/ansible-tmp-1555848182.1761565-31974482443721/AnsiballZ_stat.py && sleep 0'"]
    <nexus3-oss-debian-stretch> EXEC ['/usr/bin/docker', b'exec', b'-i', 'nexus3-oss-debian-stretch', '/bin/sh', '-c', '/bin/sh -c \'http_proxy=\'"\'"\'\'"\'"\' https_proxy=\'"\'"\'\'"\'"\' no_proxy=\'"\'"\'\'"\'"\' /usr/bin/python /home/deployuser/.ansible/tmp/ansible-tmp-1555848182.1761565-31974482443721/AnsiballZ_stat.py && sleep 0\'']
    <nexus3-oss-debian-stretch> EXEC ['/usr/bin/docker', b'exec', b'-i', 'nexus3-oss-debian-stretch', '/bin/sh', '-c', "/bin/sh -c 'rm -f -r /home/deployuser/.ansible/tmp/ansible-tmp-1555848182.1761565-31974482443721/ > /dev/null 2>&1 && sleep 0'"]
    ok: [nexus3-oss-debian-stretch] => {
        "changed": false,
        "invocation": {
            "module_args": {
                "checksum_algorithm": "sha1",
                "follow": false,
                "get_attributes": true,
                "get_checksum": true,
                "get_md5": null,
                "get_mime": true,
                "path": "/etc/systemd/system/nexus.service"
            }
        },
        "stat": {
            "atime": 1555848116.0796735,
            "attr_flags": "",
            "attributes": [],
            "block_size": 4096,
            "blocks": 8,
            "charset": "us-ascii",
            "checksum": "f1de2c2bc91adc019e58f83a29c970d1d79d5cc9",
            "ctime": 1553622777.8884165,
            "dev": 77,
            "device_type": 0,
            "executable": false,
            "exists": true,
            "gid": 0,
            "gr_name": "root",
            "inode": 22997,
            "isblk": false,
            "ischr": false,
            "isdir": false,
            "isfifo": false,
            "isgid": false,
            "islnk": false,
            "isreg": true,
            "issock": false,
            "isuid": false,
            "mimetype": "text/plain",
            "mode": "0644",
            "mtime": 1553622777.3485653,
            "nlink": 1,
            "path": "/etc/systemd/system/nexus.service",
            "pw_name": "root",
            "readable": true,
            "rgrp": true,
            "roth": true,
            "rusr": true,
            "size": 248,
            "uid": 0,
            "version": "687353",
            "wgrp": false,
            "woth": false,
            "writeable": true,
            "wusr": true,
            "xgrp": false,
            "xoth": false,
            "xusr": false
        }
    }

app.component.html：

import { Component, NgModule, Compiler } from '@angular/core';
import { RouterModule, Router } from '@angular/router';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html'
})
export class AppComponent  {

  constructor(private compiler: Compiler,
              private router: Router) {}

  createDynamic() {
    const template = '<span>generated on the fly</span>';
    const tmpCmp = Component({template: template})(class {});

    const routes = [{path: '', component: tmpCmp}];
    const tmpModule = NgModule({
      imports: [RouterModule.forChild(routes)],
      declarations: [tmpCmp]})(class {});

    this.compiler.compileModuleAsync(tmpModule).then((module) => {

      const appRoutes = [...this.router.config];

      const route = {
        path: 'dynamic',
        loadChildren() { return module }
      };

      appRoutes.push(route);

      this.router.resetConfig(appRoutes);
      this.router.navigateByUrl('/dynamic');
    });
  }
}

动态加载组件，stackblitz

Angular CLI多个动态组件加载到父组件

2 个答案: