外部值傳遞給一個角度應用

Question

我想我們基於MVC的網站的前端分離成幾個組成部分，我想使用角度爲目的（如創建購物車的應用程序，我可以包括我的看法之後）。

問題是，我需要幾個變量傳遞到該應用程序，我不知道該怎麼做安全，專業。我在想是這樣的：

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=previewhttps://plnkr.co/edit/nOQuXE8hMkhakDNCNR9u?p=preview - 請注意，它不是一個輸入（因爲它沒有外部的角度上下文做輸入...） - 它是一個簡單的字符串屬性 ，你需要解析自己。

• 理想，雖然，你會做的 @robtown建議和實際傳遞數據的JavaScript，而不是 傳遞它作爲一個DOM字符串和檢索/自己進行解析 （它從來沒有真正的角是一個支持的情況下，儘管 顯式警告，反對angular1 NG-INIT的使用來實現 這個） - 見https://plnkr.co/edit/PoSd07IBvYm1EzeA2yJR?p=preview有關如何做這 簡單，可測試的例子。我看到

所以2個好的選擇是：

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渲染的數據，並在您的應用程序導入：

   在服務器渲染這樣的事情是角之前加載自舉一個腳本標記或JS文件：

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

   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 { } 
   

   ，然後用它作爲一個正常的角度服務：

   使用供應商告訴你的NgModule吧

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