Question

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

问题是我需要将少量变量传递到该应用程序中，并且我想知道如何安全和专业地执行此操作。我在考虑类似的事情：

我要去ng build --prod --aot
我将所有脚本注入我的视图
我注入传递给我的应用程序的变量

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

控制器：

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提出了一些建议：

到最初的问题，如果你真的想从中获取数据   root，这是可能的   https://plnkr.co/edit/nOQuXE8hMkhakDNCNR9u?p=preview - 请注意，它不是输入（因为输入之外没有任何角度上下文...） - 它是一个简单的字符串属性   你需要解析自己。

理想情况下，你会这样做   @robtown建议并实际传递javascript中的数据，而不是   而不是将其作为DOM字符串传递并自己检索/解析它   （尽管如此，它从未真正成为角度支持的案例   显式警告 - 在angular1中使用ng-init来完成   这个） - 请参阅https://plnkr.co/edit/PoSd07IBvYm1EzeA2yJR?p=preview了解一下   如何做到这一点的简单，可测试的例子。

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

将常规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，则需要手动解析它。

让服务器将数据呈现为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);
  }
}

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

1 个答案: