3

我有一个工作的角度应用程序。我想将它与生成静态页面的内容管理系统集成，但为此我需要使用index.html页面中的内容投影。

像这样的东西：

    <!doctype html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <title>AngularBacktest</title>
        <base href="/">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="icon" type="image/x-icon" href="favicon.ico">
      </head>
      <body>
        <app-root>Text injected from index.html</app-root>
      </body>
    </html>

然后，组件通过在其模板中app-root包含以下内容来实现内容投影：<ng-content></ng-content>

  @Component({
    selector: 'app-root',
    template: '<p>Content projection from outside:11<ng-content></ng-content>11</p>',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent { }

唉，事情似乎不像我想要的那样工作。编译并启动应用程序后，渲染结果如下：

  • 外部内容投影：1111

这是我的问题：

  • 是否可以像上面的示例一样从角度应用程序外部使用内容投影？
  • 如果是，如何？如果不是，为什么？

编辑：在一些评论中，我被问到为什么我想要这样的东西。原因如下：我的 Angular 应用程序提供了可配置的组件来实现财务回溯测试模拟。这包括获取历史报价、运行模拟并在图表中显示结果。我想显示在 WordPress、Dokuwiki 甚至是某些 Apache 实例提供的静态页面等环境中运行的模拟。这可能是一个例子：

    <!doctype html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <title>Pure Buy &amp; Hold example</title>
        <base href="./">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="icon" type="image/x-icon" href="favicon.ico">
      </head>
      <body>
        <p>This simulation shows a pure <em>Buy &amp; Hold</em>, investing
        100'001USD in the S&amp;P500, between 2000, January the 1st, and    
        2020 January the 1st:</p>
        <app-root>
          <simulation start="2000-01-01" end="2020-4-9" quotes="SPY">
              <chart-report>
                  <chart-report-configuration show="SPY.CLOSE" showDataAs="LINE" showDataOn="LEFT"    normalize="true"    ></chart-report-configuration>
                  <chart-report-configuration show="BAH.NAV"     showDataAs="LINE" showDataOn="LEFT"    normalize="true"    ></chart-report-configuration>
              </chart-report>
              <accounts>
                  <swiss-quote id="BAH" cash="100000">
                      <strategy>
                          <buy-and-hold assetName="SPY"></buy-and-hold>
                      </strategy>
                  </swiss-quote>
              </accounts>
          </simulation>
        </app-root>
        <p/>Blah blah blah blah</p>
      </body>
    </html>
4

0 回答 0