当前位置: 首页 > 面试题库 >

将Angular 2组件散布在非角度页面中

花品
2023-03-14
问题内容

当前正在查看从Angular 1-> Angular 2升级的路径,而我们在Angular
1工作中完成的一件事是在面向公众的非应用程序页面上重用我们的某些组件。

这些页面实际上是静态HTML(尽管它们是由Rails渲染的),然后将某些Angular 2组件放置到页面中。这是从Angular
1开始的,我们只需使用提供所需指令和组件的模块引导文档元素。根本没有路由。

使用Angular
2,看起来它是全部还是全部。您声明一个根组件,所有内容都通过该组件呈现。对于我们来说,这将是一个巨大的转变,我想避免改变我们在这些面向公众的页面上做事的方式。

是否可以根据需要在静态HTML页面中仅使用Angular 2组件,还是我们需要转向单个根元素SPA设计?

简而言之,我想问的是,是否可以将静态内容与动态角度成分混合在一起,还是所有角度成分都必须生活在页面的单个根元素中?


问题答案:

因此,这比我最初想的要简单。在Angular
2文档中,
它具有自举多个应用程序的一些特定用语。

引导多个应用程序

在浏览器窗口中工作时,有很多单例资源:cookie,标题,位置等。同样,代表这些资源的Angular服务也必须在所有占用相同浏览器窗口的Angular应用程序之间共享。因此,Angular会精确地创建一个html" target="_blank">存储所有共享服务的全局平台对象,并且每个Angular应用程序注入器都将平台注入器作为其父代。

每个应用程序也都有自己的专用注射器。当页面上有多个应用程序时,Angular将每个应用程序注入者的服务视为该应用程序的私有服务。

因此,显然这是有可能的,并且多个应用程序共享服务资源,这正是我希望的。

我已经对多个自举组件进行了一些琐碎的测试,并且工作正常。我尚未尝试的一件事是引导Angular 2
属性指令以在Angular 2组件之外使用。我怀疑这将不起作用,并且引导程序仅适用于组件而不适用于指令。

在指导方面,我建议Angular
2并不是真正为在整个静态页面上分散行为而设计的,可能不应该这样使用。相反,尽管您可能有多个应用程序定义了页面的多个部分,但这些组件几乎应构成所有文档/界面。



 类似资料:
  • 问题内容: 我正在尝试实施以下测试方案: 单击页面上的徽标 断言有一个新的浏览器窗口打开(Chrome中的选项卡)并检查当前URL 问题在于,在新浏览器窗口中打开的页面 是非角度页面, 而我正在执行单击操作的 主页 是 角度页面 。 这是我的第一次尝试: 失败与: 错误:等待量角器与页面同步时出错:“在窗口中找不到角度” 这是可以理解的。 我的第二次尝试是使用布尔标志: 实际上,这使该特定测试通过

  • 我对角度布线有问题,我想在单击按钮“验证”时导航到组件页面WidgetsComponent component.html: 组件。ts: The app-routing.module.ts: 当我点击验证按钮时,没有任何反应,我没有得到我想要的html页面,但网址更改为 http://localhost:4200/widgets。我也尝试了路由器链接,但它仍然是同样的问题。有人知道如何解决这个问题

  • 在angular 2中,假设我有一条使用组件的路线: 现在,如果我直接导入组件,这就可以了: 但是我应该如何导入模块呢? 这不起作用,因为不是在模块文件中定义的,而是在组件文件中定义的。 以便组件加载模块的所有可用导入和声明? 根据@HristoKolev的建议,我在模块中添加了以下内容: 这允许路由从模块中查看基本表单组件。 但是,BasicForm组件似乎没有看到从NgMoules导入。特别是

  • 问题内容: 我正在将React Router添加到现有项目中。 目前,模型被传递到根组件中,该根组件包含用于子导航的导航组件和主组件。 我发现的React Router的示例只有一个子组件,在不重复两个子组件的情况下更改两个子组件的最佳方法是什么? 问题答案: 如果我正确理解您的要求,则可以在中定义多个组件。您可以像这样使用它: 另外,请查看 侧边栏 示例应用程序,它应该对您有更多帮助。 编辑:

  • 我正在学习Angular 5+,最近来到主题/订阅部分,我看到很多教程都希望以特定的方式使用订阅: 在组件中声明订阅 通过服务的主题或ngrx/store在ngOnInit中订阅 在ngondestroy中取消订阅 null

  • 我是angular 4的新手。我试图实现的是在我的应用程序中为不同的页面设置不同的布局页眉和页脚。我有三种不同的情况: 登录,注册页面(无页眉,无页脚) 路由: [“登录”, “注册”] 路线:['','about','contact'] 路线:['仪表板','配置文件'] 我通过在路由器组件html中添加页眉和页脚来临时运行应用程序。 请给我一个更好的方法。 这是我的代码: 我在stack-ov