问题标签 [angular2-styleguide]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
4516 浏览

javascript - 输入和输出,如何使用它们以遵循 Angular 2 样式指南的命名约定?

在我知道更好之前,我曾经这样定义我的指令:

但后来我阅读了样式指南,它说你不应该在输出前加上前缀,on因为 Angular 2 支持on-模板中的语法。

所以我试图将其更改为:

但是,如果不允许使用前缀,我发现很难将@Input名称与名称分开。Outputon

在您可以同时命名@Input相同@Output的事物之前,但如果在导出的类中同时声明两者,那么这将不再有效,因为将引发错误。

如果我将@Inputtooutside@Outputto命名为outsideClick,这实际上没有意义,因为它们都是同一件事。outside是我在调用时要执行的函数outsideClick

另外,如果不再命名相同的东西,或者我错过了什么,outsideClick就不知道要执行什么?outside

我应该如何在此处命名@Inputand@Output变量,以便它仍然有效并且与第一个示例中一样有意义?

编辑:

使用示例:

0 投票
1 回答
1644 浏览

angular - Angular 2:使用组件选择器应用 CSS 样式

我正在学习 Angular 2,我想知道是否可以通过使用这样的组件选择器来应用 css 样式:

组件

样式

假设这是可能的,这是最好的方法吗?

0 投票
1 回答
39 浏览

css - Angular2 应用程序开始之前的样式加载状态不起作用?

在我的 index.html 中,我想在 Angular2 应用程序启动/引导之前向用户显示加载状态。

我正在尝试在名为 loading-state.css 的样式表中提供样式并将其包含在 index.html 中,但不知何故它没有从该文件中获取样式。但是,在标题或内联样式中的标记中给出样式时,我得到了预期的行为。我错过了什么吗?

0 投票
2 回答
3689 浏览

angular - Angular 2 - 如何有条件地向我的组件添加样式?

我有一个带有正确加载样式表的组件,如下所示:

如果字符串存在于 url 中,我想有条件地加载另一个样式表,widget=true但无论如何都无法工作。我试过了:

在我的html顶部:

我该怎么做才能有条件地加载这样的附加样式表?我不知道还能尝试什么。

0 投票
1 回答
365 浏览

angular - Atom 中的 Angular 2 样式指南助手 - 缺少功能

我的主管拥有带有 8 个 Angular 插件的 Atom。我安装了相同的八个插件。但我错过了他拥有的一项功能,我们不确定哪些插件或首选项会提供该功能。这与 Angular 2 样式指南有关。它提供了不符合样式指南的代码信息。

您可以在他的 IDE 窗口右下方的截图中看到警告:

在此处输入图像描述

在我的 IDE 中查看同一个文件,我没有看到任何警告:

在此处输入图像描述

他和我在搜索“angular”时安装的插件是:

angular-2-typescript-snippets, angular-bootstrap, angular2-snippets, angular2-snippets-atom, angularjs, angular-helper, angularjs-snippets, angularjs-styleguide-snippets

对我们来说可能不同的一件事是他使用的是 Linux 系统,而我使用的是 Mac OS。

我需要这个功能。有人可以帮我弄清楚如何帮我把它带到 Atom 吗?

0 投票
1 回答
202 浏览

angular2-cli - Angular 2 css 样式

我正在使用 angular-cli 编写一个 angular2 应用程序。我遵循这样的结构 - 全局样式被导入/放入 styles.scss 中,在 angular-cli.json -> 样式中指定:[] - 每个组件都有自己的 scss 一切正常

但是,有人告诉我,在构建和运行应用程序时,这些样式将转换为内联样式并插入到主 html 文件 (index.html) 的标题中。我在运行应用程序时检查了 index.html 并看到插入了许多内联样式的部分。人们还告诉我解决方案是将所有内容放在一个 css 文件中并在 index.html 中放置一个链接,该大 css 文件将被下载并缓存,这将为用户下次使用提供更快的加载性能但是我很少看到任何使用此解决方案设计的 angular2 应用程序,我认为它背后一定有一个原因,我不知道任何人请给我一个解释

0 投票
1 回答
663 浏览

angular - Angular 2 应用程序结构/核心模块和第三方库

我试图找到一种构建 Angular 2 应用程序的好方法。Angular 2 风格指南推荐创建一个核心模块。如果我理解正确,核心模块的目标是收集一次性类和组件并保持根模块纤细。还有写的是我应该将资产所需的所有模块导入核心模块。

对于需要包含在方法 forRoot() 中的第三方库(如 NgBootstrap 或 angular2-notifications),我有点困惑。通常只应在根模块中调用 forRoot() 方法。我应该在根模块还是核心模块中包含这些模块?

在下面的示例中,我需要对 angular2-notifications 进行一些配置。为了让我的根模块保持苗条,我在核心模块中导入了 SimpleNotifications。

  • 这是正确的方法吗?为了使应用程序工作,我仍然需要在应用程序模块中导入 SimpleNotificationsModule.forRoot()。
  • 为什么我需要在核心模块中再次导入 SimpleNotificationsModule。它不应该由应用程序模块提供。我认为感谢 forRoot() 他们的核心模块使用与应用程序模块相同的导入模块?
  • 如果是,我应该在核心模块中导入 SimpleNotifications 吗?我真的应该在那里调用 forRoot() 方法吗?

应用模块


应用组件


核心模块


通知组件

0 投票
1 回答
36 浏览

angular - 如何导入组件?

我们目前正在开发 Angular Living Styleguide。我们计划在本样式指南中开发组件并在我们的应用程序中使用它们。

对于应用程序,我们还想使用 redux 模式:https ://github.com/angular-redux/store

我找不到的是:如何将通过 npm 包导入的组件链接到 redux 商店?

  • 商店是否应该作为服务注入到组件中?这不利于脱钩。那么双组件又会怎样呢?它们会具有相同的调度消息?
  • 是否应该通过 将商店提供给组件@Input?然后其他变量,如 dispatch-strings 也必须传递给组件。(例如一个按钮 - 按下时调度哪个动作)
  • 我是否应该实现一个服务来处理所有 redux 的东西,包括向服务提供调度消息的组件?这对我来说似乎是重新实现 redux。
0 投票
1 回答
829 浏览

javascript - 当我使用 ngstyle 时“找不到不同的支持对象”

我确实有一个进度条

我已经使用ngStyle="max-width:{{redrated}}%"并尝试过尝试:

  1. 在组件中创建了一个对象并以 ng 样式调用它
  2. 甚至ngStyle="{'max-width': '20px' }"也给出了同样的错误请帮我解决这个问题
0 投票
1 回答
338 浏览

javascript - angularjs 指令使用控制器作为 vm 而不是作用域

我正在尝试创建一个指令。我一直在遵循 john papa 自以为是的风格指南并将控制器用作 vm。不幸的是,当我尝试制定指令时,我不确定如何在不使用 $scope 而不是 vm 的情况下做到这一点。

(最后一个标签应该是 angularjs-styleguide 但我找不到,而且我没有足够的积分来制作新标签)

这是plunkr。 https://plnkr.co/edit/DYTJURgaLd0QadcCSPFW?p=preview

控制器

指示