开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

在angular共享模块中注册mat-icon并在主机应用程序中使用它

在Angular中，可以使用共享模块来注册mat-icon并在主机应用程序中使用它。下面是完善且全面的答案：

在Angular中，mat-icon是Angular Material库中的一个组件，用于显示矢量图标。要在共享模块中注册mat-icon，需要执行以下步骤：

首先，确保已经安装了Angular Material库。可以使用以下命令进行安装：
首先，确保已经安装了Angular Material库。可以使用以下命令进行安装：
在共享模块中导入MatIconModule模块，并将其添加到imports数组中。共享模块是一个用于导入和导出模块的集合，以便在应用程序的多个模块中共享组件、指令和服务。
在共享模块中导入MatIconModule模块，并将其添加到imports数组中。共享模块是一个用于导入和导出模块的集合，以便在应用程序的多个模块中共享组件、指令和服务。
然后，在主机应用程序的模块中导入共享模块，并将其添加到imports数组中。
然后，在主机应用程序的模块中导入共享模块，并将其添加到imports数组中。
现在，可以在主机应用程序的模板中使用mat-icon组件了。可以通过在模板中使用<mat-icon>标签，并设置svgIcon属性来显示指定的矢量图标。
现在，可以在主机应用程序的模板中使用mat-icon组件了。可以通过在模板中使用<mat-icon>标签，并设置svgIcon属性来显示指定的矢量图标。
其中，icon-name是要显示的矢量图标的名称。

以上是在Angular共享模块中注册mat-icon并在主机应用程序中使用它的完善且全面的答案。

推荐的腾讯云相关产品和产品介绍链接地址：

相关搜索:依赖注入:在应用启动中注册类型并在应用程序中使用它在Visual Studio2017中使用Web Deploy发布ASP.NET Core2.1/Angular应用程序不会将ClientApp/dist文件夹复制到主机在单独的文件中创建typerscript类并在angular2组件中使用它们在单独的文件中定义passport策略，并在整个应用程序中使用它在我的Angular JS应用程序中，我想知道控制器中使用了哪些服务和模块？我们是否可以在AppDelegate中实例化核心数据的单个对象，并在整个应用程序中使用它？获取一些手动存储在firebase存储中的图像，并在我的react原生应用程序中使用它 11.11安全加速网络哪里买划算 11.11全球办公访问哪里买划算 11.11全球办公网络访问哪里买划算

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

如何简化 Web 应用程序的开发过程？AngularJS 模块了解一下

本文将详细介绍 AngularJS 模块的概念、用法和最佳实践。2. 模块的定义在 AngularJS 中，模块是一个容器，用于组织和封装应用程序的组件、指令、服务和配置等。...模块的配置模块的配置（Configuration）用于在应用程序启动时进行一些初始化设置。通过配置，我们可以注册服务、定义路由、设置全局行为等。...注册服务的语法：angular.module('moduleName').service('serviceName', function() { // 服务实现});'moduleName'：包含要注册服务的模块的名称...在控制器中使用依赖注入：angular.module('myApp').controller('MyController', function($scope, MyService) { // 控制器逻辑...AngularJS 将负责在实例化控制器时自动注入这些依赖项，我们无需手动创建它们。7. 模块间的通信在大型应用程序中，模块之间的通信和协作非常重要。

1663 0

模块化开发 Angular 应用

想要更好地理解 Angular 应用程序所有的不同构建的模块？在这篇文章中，我们将走进模块的内容。在 angular 应用中，模块是共享和重用代码的好方法。...共享模块不仅让你的应用联系紧密，而且可以对你的应用进行瘦身。在这个教程中，我们将创建自定义的模块，并发掘它的组件。...所以，即使你不知道哪些是模块或者怎么使用它们，你已经无行在应用中使用它们了。其中最突出的是 AppModule。 AppModule 是你应用中的根模块，并且对于运行我们的应用程序是必要的模块。...让我们仔细点看，这些属性是什么，又干了些什么： Bootstrap 定义应用程序的根组件。仅在 AppModule 中使用它。 Exports 我们在这里定义要组件、指令或者管道。...现在，我们可以在 AppModule 导入它，然后使用它里面的组件，比如在 AppComponent 中使用。

3K1 0

Angular 6+依赖注入使用指南：providedIn与providers对比

Angular 6为我们提供了更好的语法——provideIn，用于将服务注册到Angular依赖注入机制中。...在懒加载模块中使用providers: [] 在应用程序运行初始化后一段时间，懒加载模块中提供的服务实例才会在子注入器（懒加载模块）上创建。...上面图中，RandomService 在 RandomComponent中被注册，因此，每当我们在模板中使用组件时，我们将得到不同的随机数。...简单来讲： 1、如果服务仅被注入到懒加载模块，它将捆绑在懒加载包中 2、如果服务又被注入到正常模块中，它将捆绑在主包中这种行为的问题在于，在拥有大量模块和数百项服务的大型应用程序中，它可能变得非常不可预测...主机应用程序应该引用它们的唯一一点是某些路由的 loadChildren 属性。这意味着，如果使用正确，可以将整个模块删除或外部化为独立的应用程序/库。

2.8K1 1

【17】进大厂必须掌握的面试题-50个Angular面试

为了在Angular应用程序中执行动画，您需要包括一个称为Animate Library的特殊Angular库，然后将ngAnimate模块引用到您的应用程序中，或者将ngAnimate作为依赖项添加到您的应用程序模块内部...在Angular中，服务是可替换对象，该对象使用依赖项注入连接在一起。通过将服务注册到要在其中执行的模块中来创建服务。基本上，您可以通过三种方式创建角度服务。...链接功能用于注册DOM侦听器以及实例DOM操作，并在克隆模板后执行。 43. 您对Angular中的常数有什么了解？在Angular中，常量类似于用于定义全局数据的服务。...为了在Angular中使用cookie，您需要包含一个名为ngCookies angular-cookies.js的模块。...48.在Angular中解释ng-app指令。 ng-app指令用于定义Angular应用程序，使我们可以在Angular应用程序中使用自动引导。

41.3K5 1

52ABP-PRO 前后端分离架构概述

当您禁用它的时候，所有的多租户的功能都会被关闭。我们会默认开启一个名为“default”的租户。在多租户的应用中，我们有两种不同类型的透视图：宿主（主机）：管理租户和系统。...我们建议将模块化思想贯彻到底，应用程序划分为更小的模块，就像我们在启动项目中所做的那样，而不是将所有功能添加到主模块中。尽量使用懒加载的形式。作为基础设施的模块，都应该有自己的路由。...这加快了项目的启动时间（以及让开发调试也更快了，同时他们被独立分割成独立的模块）除了那些基本模块，还有一些共享模块： app/app-shared/common/app-shared.module：它作为共享功能的通用模块服务于...shared/utils/utils.module：所有模块（及其子模块）使用的另一个常用模块。我们尝试在这里收集通用代码，即使在不同的应用程序中也可以使用。...例如; 你可以在组件类中使用 this.l（...）函数进行本地化。在视图中，您可以使用 localize pipe。请参阅预构建的组件，例如用法。

3.7K4 0

Angualr2 之 angular模块Angular 模块化提供服务特性模块 - 业务上的最佳实践（n）共享模块XxxModule.forRoot配置核心服务知识点

管理指令、管道、组件在模块中定义的提供商是会加到根模块中去，正常引导的话，如果是惰性加载的话，就会放在一部分中（在loading范围内的根模块）。...@NgModule接收一个元数据对象，该对象告诉 Angular 如何编译和运行模块代码。它标记出该模块拥有的组件、指令和管道，并把它们的一部分公开出去，以便外部组件使用它们。...它可以向应用的依赖注入器中添加服务提供商。 Angular 模块化模块是组织应用程序和使用使用外部程序库的最佳途径。很多Angular库都是模块，e.g....4-在应用程序级提供服务，以便应用中的任何组件都能使用它。...特性模块 - 业务上的最佳实践（n）根模块和特性模块共享着相同的执行环境。它们共享着同一个依赖注入器，这意味着某个模块中定义的服务在所有模块中也都能用到。

2.2K3 0

Angular Provider 作用域

当你注册根级别的服务时，Angular 会创建一个单独的共享服务实例。如果在 @Injectable 元数据中注册服务，Angular 会在构建阶段自动剔除无用的服务，进而优化我们的应用程序。...因此当我们在跟模块中配置某个服务后，这个服务将在整个应用程序中可用。需要注意的是在非懒加载的特性模块中，如果我们也注册了同一个服务。在根模块和特性模块中是使用同一个服务实例，即服务是单例的。...总结如果在多个特性模块中，使用同一个 token 注册 provider，只有最后一个模块中的注册的 provider 才会生效。...如果在多个特性模块中，使用同一个 token 注册 provider，此外在根模块中同样也注册了相同的 provider，只有根模块中注册的 provider 会被添加到根注入器中，此后所有的特性模块将会共享同一个实例...当在懒加载的模块中使用模块外的服务时，它将使用根注入器创建的服务实例。但如果已经在懒加载模块中注册了 provider，在模块内获取对应的服务时，它将从模块的子注入器中获取对应的服务实例。

1.8K2 0

【译】.NET Core 3.0 Preview 3中关于ASP.NET Core的更新内容

Razor组件在HTML中是完全呈现的。 Razor类库中的Razor组件现在可以将Razor组件添加到Razor类库中，并使用Razor组件从ASP.NET核心项目引用它们。...在Razor组件应用程序中，使用@addTagHelper指令从Razor类库导入所有组件，然后在应用程序中使用component1 Index.razor 1: @page "/" 2...如果要在库中创建可与Blazor和Razor组件应用程序共享的组件，仍然需要使用Blazor类库。这写问题会在未来的更新中解决。...运行时验证对运行时编译的支持已从.NET Core 3.0中的ASP.NET核心共享框架中删除，但现在可以通过向应用程序添加包的方式来启用它。...Angular模块所构建的身份验证和授权支持，可以导入到您的应用程序中，并提供一套组件和服务来增强主应用程序模块的功能。

22.6K1 0

Angular快速学习笔记（2） -- 架构

Angular充分利用了装饰器（java里的annotation）来标识类的类型，并在装饰器中提供元数据（metadata）来告知ng如何使用它们。...根模块总会有一个根组件，并在引导期间创建它。但是，任何模块都能包含任意数量的其它组件，这些组件可以通过路由器加载，也可以通过模板创建。...你可以在模块中或者组件中注册这些提供商。 - 当你往根模块中添加服务提供商时，服务的同一个实例会服务于你应用中的所有组件。...- 当你在组件级注册提供商时，你会为该组件的每一个新实例提供该服务的一个新实例，要在组件级注册，就要在 @Component 元数据的 providers 属性中注册服务提供商因此，对于模块机共用的...service，最好再root模块中provide，这样方便一个实例实现共享和通信。

5.2K2 0

无需框架，就能实现微前端，理解起来通俗易懂

为什么需要微前端假设你正在一个项目中使用一个特定的框架或库(比如React.js)，但你需要切换到另一个框架或库，或者添加另一个在另一个框架(比如Angular.js)上编写的模块。...项目结构我们将构建三个模块，即React中的主应用、React中的子应用和Angular中的子应用。...子应用程序中的实现: 要将一个模块导出为一个子应用程序，我们必须导出以下生命周期函数: bootstrap——它将被调用一次，就在注册的应用程序第一次挂载之前。...文件中为single-spa-angular提供一个mainModule*(Angular根模块)、domElementGetter和template。...在一个SPA库中注册所有的子应用程序。

2K2 0

如何在 ASP.NET MVC 中集成 AngularJS（1）

MVC Razor 视图中使用 AngularJS 视图和控制器的优势之一，就是 Angular 提供了很好的机制来编写高质量的 JavaScript 模块、一种纯 HTML 视图和 JavaScript...这包括 Home 目录中的所有控制器和应用程序的共享服务。此应用程序的共享服务，将在所有模块中执行- 包括一个 Ajax 服务和提醒服务。...如前所述，此应用程序具有三个功能模块：基本的关于、联系我们和主页的模块、一个客户模块和产品模块。由于此应用程序可随时间而增长，我不希望该在应用程序的配置和引导阶段中，预加载所有的功能模块。...为了使这种注册方法有效，必须在配置阶段配置这种注册。下面的代码片段在应用程序启动之后，使用了 $controllerProvider 来使注册方法有效。...在下面的例子中，提供了一种用于注册和动态加载两个控制器和服务的注册方法。如果你愿意，也可以包括 Angular 全部库和指令的注册功能。

7.6K6 0

Angular 重磅回归

移除模块在 Angular 中，最小的代码块不是组件，而是模块。在众多 JavaScript 框架中，只有它是这样的。...对于经验丰富的 Angular 开发人员，Nicoll 建议不要在生产应用中采用“淘汰和替换”的方法。她说：“你可以删除应用程序模块，这是启动整个应用程序的基础模块。...她补充说，支持 Angular 应用程序基础结构的工具和依赖项仍在发展，只是还没有达到这种程度。 “我想说，一定要从组件中删除模块，或者在开发新组件或管道时不再使用它们。...她补充说，就目前而言，未来在 Angular 中不会出现这种变化检测，这将缩短加载时间，提升应用程序性能，甚至提升开发速度。...控制流允许在模板中使用 if 和 else 语句，方便开发人员加载东西，甚或是延迟加载（例如图像），直到用户需要或执行到这块时。她说：“所有这些都可以改善 Angular 应用程序的用户体验。

2262 0

Script Lab 11：OIfficeJS的三种调试方式

网络文件共享【适合范围】此方法仅适用于在Windows上运行的Excel，Word和PowerPoint加载项; 并且仅适用于使用yo office工具创建并且在package.json文件sideload...6、运行以下命令以引导主机应用程序（例如Excel，Word）并在主机应用程序中注册您的加载项： npm run sideload ? 接着会自动启动桌面Excel并加载该插件。...无论您使用的是Yeoman Generator，Visual Studio Code，node.js，Angular还是其他工具，都可以附加调试器。...在Visual Studio中，您将在解决方案资源管理器中看到代码文件。您可以将断点设置为要在Visual Studio中调试的代码行。...如果您没有使用像Visual Studio这样的IDE，或者您需要在IDE外部运行加载项时调查问题，也可以使用它们来开发和调试Office加载项。

2.3K2 0

AngularJS Providers 详解

在 Angular 应用中，这些对象通过注入器服务自动完成实例化和绑定。...我们将从最简单的例子开始，通过 Value recipe在代码中共享一个字符串。...can also use it in our controller and template: 由于在运行阶段，Constant recipe 创建的值和 value recipe 一样，所以我们也可以在控制器和模板中使用它...然后注册这个构造函数到一个模块。...DemoController 是根据应用程序的需要，通过其构造函数实例化的（在我们的简单应用中只有一次）。与服务不同，控制器并不是单例的。

1.1K5 0

如何在 Windows 上安装 Angular：Angular CLI、Node.js 和构建工具指南

Angular CLI, Node.js, and Build Tools，作者为Ahmed Bouchefra 在本教程中，我们将学习如何在 Windows 中安装 Angular CLI 并使用它来创建...在本例中，Node.js 用于构建应用程序的后端部分，并且可以替换为您想要的任何服务器端技术，例如 PHP、Ruby 或 Python。...如果您想将组件、指令或管道添加到另一个模块（主应用程序模块 app.module.ts 除外），您只需在组件名称前加上模块名称和斜杠即可： $ ng g component my-module/my-component...结论在本教程中，我们了解了如何在 Windows 计算机上安装 Angular CLI，并使用它从头开始初始化一个新的 Angular 项目。...我们还看到了您可以在整个项目开发过程中使用的各种命令来生成 Angular 工件，例如模块、组件和服务。查看我们的其他 Angular 教程。

3650 0

Angular 11正式发布：加入webpack 5，升级至TS 4.0，不再支持IE 9 和10

在编译时，Angular CLI 将下载和内联在应用程序中使用和链接的字体。我们会在使用版本 11 构建的应用中默认启用此功能。要利用这一优化，你需要做的就是更新自己的应用！...热模块替换（HMR）支持更新 Angular 提供了对 HMR（Hot Module Replacement）的支持，但启用它需要一些配置和代码更改操作，所以不方便快速添加到 Angular 项目中。...在版本 11 中我们更新了 CLI，允许开发人员在使用 ng serve 启动应用程序时启用 HMR。...Linting 在以前的 Angular 版本中，我们提供了 linting（TSLint）的一个默认实现。现在，TSLint 的项目创建者已经弃用它了，并建议大家迁移到 ESLint。...IE11 是 Angular 还在支持的唯一 IE 版本。我们还移除了一些已弃用的 API，并在弃用列表中添加了一些项目。

3.3K3 0

JSON Web Token(JWT)教程：一个基于Laravel和AngularJS的例子

Reserved claims 这些claim是JWT预先定义的，在JWT中并不会强制使用它们，而是推荐使用。...可重用性：我们可以拥有许多独立的服务器，在多个平台和域（domains）上运行，重复使用相同的令牌来验证用户。很容易构建与其他应用程序共享权限的应用程序。...Laravel后端示例我们将使用Laravel来处理用户注册，将用户数据保留到数据库，并提供一些需要认证的受限数据，以供Angular应用程序使用。...它将被放置在我们的config/jwt.php文件中。然而，在生产环境中，我们不想在配置文件中使用我们的密码或API密钥。...相反，我们应该将它们放在服务器环境变量中，并使用该env函数在配置文件中引用它们。

30.5K1 0

Angular进阶教程2-

，该注入器主要负责创建服务实例，并把他注入到类中，元数据providedIn: 'root' 表示 HeroService在整个应用程序中都是可见的。...}{子组件}子组件中都能共享\color{#0abb3c}{共享}共享这个服务，当然在模块\color{#0abb3c}{模块}模块中注入服务\color{#0abb3c}{注入服务}注入服务也可以达到相同的结果...}injectors 补充上述原因：因为Angular在启动程序时会启动一个根模块，并加载它所依赖的其他模块，此时会生成一个全局的根注入器，由该注入器创建的依赖注入对象在整个应用程序级别可见，并共享一个实例...所以说在Angular中并没有模块级别的区域，只有组件级别和应用级别的区域。模块级别的注入就相当于是应用级别。...在服务类中注入服务 // 这种注入方式，会告诉Angular在根注入器中注册这个服务,这也是使用CLI生成服务时默认的方式. // 这种方式注册,不需要再@NgModule装饰器中写providers,

4.1K3 0

AngularDart4.0 英雄之旅-教程-06服务顶

然而，定义英雄不是组件的工作，你不能轻易与其他组件和视图共享英雄名单。在这个页面中，您将把英雄数据采集业务转移到一个提供数据的服务中，并与需要数据的所有组件共享该服务。...导入HeroService，以便您可以在代码中引用它。...当组件实现该方法时，Angular会在适当的时候调用它。在“Lifecycle Hooks”页面中详细了解生命周期挂钩。...将OnInit添加到由AppComponent实现的接口列表中，并使用里面的初始化逻辑编写一个ngOnInit（）方法。 Angular会在正确的时间调用它。...使用Future，您可以注册回调函数，在计算完成时（结果准备就绪），或需要报告计算错误时调用。这是一个简单的解释。

2.9K1 0

AngularDart4.0 指南-体系结构概述顶

您可以通过使用Angular的标记组合HTML 模板，编写组件类来管理这些模板，在服务中添加应用程序逻辑以及在模块中装入组件和服务来编写Angular应用程序。然后，通过引导根模块启动应用程序。...模块 ? Angular应用程序是模块化的; 也就是说，应用程序由许多模块组装而成。在本指南中，术语module是指Dart编译单元，例如库或包。...有关编译单元的更多信息，请参阅Dart语言规范中的“库和脚本”一章。每个Angular应用程序至少有一个模块，即根模块。...简而言之，您必须事先在注入器中注册HeroService的提供者。提供者是可以创建或返回服务的东西，通常是服务类本身。无论应用程序组件树中的级别如何，您都可以在引导期间或组件中注册提供程序。...通过组件提供的服务与应用程序组件树中的所有组件的后代共享。引导时注册提供程序的情况非常少见。有关详细信息，请参阅依赖注入页面的配置注入部分。

7.9K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭