从外部将值传递给 Angular 应用程序

Question

我正在考虑将我们基于 MVC 的网站的前端分成几个组件，并且我正在考虑使用 Angular 来实现这个目的（例如，创建我可以在之后包含到我的视图中的购物车应用程序）。

问题是我需要将几个变量传递到该应用程序中，我想知道如何安全而专业地做到这一点。我正在考虑类似的事情：

1. 我要去ng build --prod --aot
2. 我将所有脚本都注入到我的视图中
3. 我将传递给视图的变量注入到我的应用中

...和我的想法的“代码”表示：

控制器：

public function viewAction()
{
    $this->view->addCss('angular/app/styles.css'); // adds styles for cart app 
    $this->view->addJS('angular/app/scripts.js');  // adds scripts for cart app
    $this->view->setJSVariable('idCustomer', 555); // sets global var idCustomer
}

查看：

<!-- bunch of HTML for view ... -->
<script>
    // CartApp would be an angular app.
    CartApp.use([
        idCustomer
    ]);
</script>

所以我的问题是......是否有可能（并且这是一个很好的解决方案）将CartApp 作为一个对象，然后创建一些函数（如上面示例中的use）来设置/传递数据？ （比方说一些全球提供的服务/组件或其他任何东西）。或者有没有其他方法可以做到这一点？就像从窗口对象中获取应用程序内部的变量一样？ （因为无论如何它们都会被绑定到窗口）。谢谢。

Answer 1

所以我打算建议使用输入绑定...我之前在 AngularJS 中做过，但惊讶地发现还不支持在根组件上使用输入绑定。您可以尽情阅读这个巨大的问题：https://github.com/angular/angular/issues/1858

我在那里看到的最好的帖子是Rob Wormald's，其中有几个建议：

• 对于最初的问题，如果您真的想从 根，这可以通过 https://plnkr.co/edit/nOQuXE8hMkhakDNCNR9u?p=preview - 请注意，它不是输入（因为在它之外没有角度上下文来进行输入......） - 它是一个简单的字符串属性 您需要自己解析。
• 理想情况下，您应该这样做 @robtown 建议并实际在 javascript 中传递数据，而不是 而不是将它作为 DOM 字符串传递并自己检索/解析它 （尽管 明确警告反对在 angular1 中使用 ng-init 来完成 这个） - 见https://plnkr.co/edit/PoSd07IBvYm1EzeA2yJR?p=preview 如何做到这一点的简单、可测试的示例。

所以我看到的两个不错的选择是：

1. 为根组件添加普通的 HTML 属性：

   <app-root appData='important stuff'></app-root>
   

   并使用ElementRef 获取它们：

   @Component({
     selector: 'app-root'
   })
   export class AppComponent {
     constructor(el: ElementRef) {
       console.log(el.nativeElement.getAttribute('appData'));
     }
   }
   

   如果您只是处理字符串或配置标志，可能效果最好。如果传递 JSON，则需要手动解析。

2. 让服务器将数据呈现为 JavaScript 并将其导入您的应用：

   让服务器在启动 Angular 之前将这样的内容渲染到脚本标签或加载的 JS 文件：

   window.APP_DATA = { ids: [1, 2, 3] }
   

   使用提供者告诉你的 NgModule：

   import { BrowserModule } from '@angular/platform-browser';
   import { NgModule } from '@angular/core';
   
   import { AppComponent } from './app.component';
   
   @NgModule({
     providers: [{ provide: 'AppData', useValue: (<any> window).APP_DATA }],
     bootstrap: [AppComponent]
   })
   export class AppModule { }
   

   然后将其用作普通的 Angular 服务：

   import {Component, Inject} from '@angular/core';
   
   @Component({
     selector: 'app-root'
   })
   export class AppComponent {
     constructor(@Inject('AppData') appData) {
       console.log(appData.ids);
     }
   }