开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

使用路由器Angular 6通过按钮点击创建导航功能时出错

可能是由于以下原因导致的：

错误的路由配置：请确保在Angular的路由配置文件中正确定义了导航功能所需的路由。检查路由路径、组件路径和路由守卫等是否正确配置。
缺少必要的模块：Angular的路由功能需要依赖RouterModule模块。请确保在应用的主模块中正确导入了RouterModule，并在imports数组中添加RouterModule.forRoot()。
按钮点击事件绑定错误：请检查按钮的点击事件绑定是否正确。确保点击按钮时调用了正确的函数或方法来触发导航功能。
缺少导航所需的HTML元素：请确保在HTML模板中正确添加了用于导航的元素，例如使用routerLink指令或者使用router.navigate()方法来实现导航。
缺少导航所需的样式或样式错误：请检查导航所需的CSS样式是否正确添加或者是否存在错误的样式导致导航功能无法正常工作。

如果以上解决方法无效，建议参考Angular官方文档或者向Angular社区寻求帮助，以获取更详细的解决方案。

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

腾讯云云服务器（CVM）：提供弹性计算能力，满足各类业务需求。详情请参考：https://cloud.tencent.com/product/cvm
腾讯云云数据库MySQL版：提供高性能、可扩展的MySQL数据库服务。详情请参考：https://cloud.tencent.com/product/cdb_mysql
腾讯云CDN加速：提供全球加速服务，加速内容分发，提升用户访问体验。详情请参考：https://cloud.tencent.com/product/cdn
腾讯云人工智能平台：提供丰富的人工智能服务，包括图像识别、语音识别、自然语言处理等。详情请参考：https://cloud.tencent.com/product/ai

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

有帮助

没帮助

相关·内容

AngularDart 4.0 高级-路由概述顶

本指南涵盖路由器的主要功能，通过演示可以实时运行的小应用程序（查看源代码）演示它们。概观浏览器是一种熟悉的应用程序导航模型：在地址栏中输入一个URL，然后浏览器导航到相应的页面。...点击页面上的链接，浏览器导航到新页面。点击浏览器的后退和前进按钮，浏览器会前后浏览您浏览过的网页的历史记录。 Angular路由器借鉴了这种模式。...当用户点击按钮，从下拉框中选择，或者响应来自任何来源的其他刺激时，您都可以进行命令式导航。并且路由器在浏览器的历史记录中记录活动，所以后退和前进按钮也起作用。...在任何使用路由器功能的Dart文件中，导入路由器库： import 'package:angular_router/angular_router.dart'; 注册提供者和列表指令如果您已经熟悉Angular...与英雄细节不同，当您键入更新时，危机细节更改是暂时的，直到您通过按下“Save”或“Cancel”按钮保存或放弃它们。这两个按钮都回到危机中心及其危机列表。不要单击任一按钮。

6.1K2 0

AngularDart4.0 英雄之旅-教程-07路由顶

添加在Heroes和Dashboard视图之间导航的功能。当用户在任一视图中点击英雄名称时，导航至所选英雄的详细视图。当用户点击电子邮件中的深层链接时，打开特定英雄的详细视图。...添加路由应该在用户点击按钮后显示英雄而不是自动显示。换句话说，用户应该能够导航到英雄列表。更新pubspec 使用Angular路由（angular_router）启用导航。...'; 使路由器可用要告诉Angular您的应用使用路由，请在应用的引导程序功能中指定ROUTER_PROVIDERS：web/main.dart import 'package:angular/angular.dart...按钮的点击事件绑定到一个gotoDetail（）方法，该方法应该通过告诉路由器去哪里命令性地导航。这种方法需要对组件类进行以下更改：导入angular_router。...你走过的路以下是您在此页面中所取得的成果：您添加了Angular路由器来浏览不同的组件。您了解了如何创建路由器链接来表示导航菜单项。您使用路由器链接参数导航到用户选择的英雄的细节。

17.5K3 0

Angular核心-路由和导航

Angular核心-路由和导航博客首页：蔚说的博客欢迎关注点赞收藏⭐️留言作者水平很有限，如果发现错误，求告知，多谢！有问题可私信交流！！！...（达内教育学习笔记）仅供学习交流 @[TOC]Angular核心-路由和导航) 多页面应用：一个项目有多个完整的HTML文件，使用超链接跳转–摧毁一颗DOM树，同步请求另一颗，得到之后再重建新的DOM... 方式2：使用脚本方法注意：Router类是RouterModule提供的一个服务类，声明依赖即可使用 //使用router服务要声明,依赖注入,注入“路由器”服务 constructor...… Angular提供了“路由守卫（Guard）”来访问路由组件前的检查功能：如果检查通过（return true）就放行，反之不放行。.../button> 按钮进入45 提供一个占位符，Angular 会根据当前的路由器状态动态填充它。

2.2K2 0

Blazor 中的路由和路由模板

在客户端上，路由器参与多种情况，最常见的情况是用户单击链接、表单上的提交按钮或下拉列表中触发服务器调用的项。路由器绑定到内部位置更改事件，并从客户端处理导航到新请求路径的整个过程。...路由器的实现是通过 SPA 框架（其中 Angular 最为出色）移动到客户端的。让我们花点时间对合并的 Angular 路由器和仍在使用的 Blazor 路由器中的功能进行简要比较。...最后的结果就是，Blazor 路由器目前仅提供作为客户端路由器的基本功能。例如，它不具备检查路由上的授权和创建在位置更改时执行视图转换的链接的功能。...更智能的链接和编程 URL 导航在 Blazor 应用程序中，欢迎你使用定位标记来创建指向外部内容的链接。...此外还可以通过编程方式触发 Blazor 路由器。若要通过 Blazor 页面中的代码进行导航，应首先为 IUriHelper 抽象类型注入已配置的依赖项。

8.3K2 1

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

Angular 本身使用 TypeScript 写成的。它将核心功能和可选功能作为一组 TypeScript 库进行实现，你可以把它们导入你的应用中。 1....根模块总会有一个根组件，并在引导期间创建它。但是，任何模块都能包含任意数量的其它组件，这些组件可以通过路由器加载，也可以通过模板创建。...当用户点击某个英雄的名字时，(click) 事件绑定会调用组件的 selectHero 方法。再来看双向数据绑定,这个是脱离jq手动绑定数据的伟大发明。...1.4 路由（Routing） Angular 的 Router 模块提供了一个服务，它可以让你定义在应用的各个不同状态和视图层次结构之间导航时要使用的路径。...它的工作模型基于人们熟知的浏览器导航约定：在地址栏输入 URL，浏览器就会导航到相应的页面在页面中点击链接，浏览器就会导航到一个新页面点击浏览器的前进和后退按钮，浏览器就会在你的浏览历史中向前或向后导航

5.2K2 0

ftp服务器搭建并通过外网访问

通过公网路由器映射或nat123端口映射均可实现。前者是硬件公网端口映射，后者是软件内网端口映射，目的一样，方法不一。工具/原料 FTP 内网 nat123客户端方法/步骤 ftp搭建： 1....【确定】按钮安装这些功能，图示如下： ?...展开左侧的导航栏，右键【网站】，点击【添加FTP站点】，图示如下： ? 5.输入FTP站点名称，以及允许用户访问的目录路径，两者都可以自定义，然后点击【下一步】，图示如下 ? 6....（文件传输协议）），直接输入ip地址会导致出错，因为数浏览器都会在你没有加任何协议的情况下，默认使用http协议，所以会出错，前面的“ftp://”一定要加上，才能顺利访问到新创建的FTP服务器，图示如下...在FTP访问端，安装使用访问者，并添加21端口（如FTP服务改了其他端口以实际为准） ? 在外网访问端，当鼠标移动停留访问者图标提示正常时，即可正常访问FTP了。 ?

14K2 1

Angular性能优化实践——巧用第三方组件和懒加载技术

应该有很多人都抱怨过 Angular 应用的性能问题。其实，在搭建Angular项目时，通过使用打包、懒加载、变化检测策略和缓存技术，再辅助第三方组件，便可有效提升项目性能。...为了帮助开发者深入理解和使用Angular，本文将以我司客户中最为典型的业务场景——在线表格编辑为例，演示如何借助懒加载技术，在基于 Angular的框架中实现在线导入导出Excel以及数据在线填报的功能...环境准备全局安装Angular CLI：npm install -g @angular/cli 使用Angular CLI创建一个新项目：ng new spread-sheets-angular-cli...Excel以及数据在线填报等功能。...经过调研，发现在Angular的默认中，NgModule都是急性加载的，也就是会在应用加载时尽快加载。无论是否要立即使用，所有模块都会一并加载。

4K2 0

AngularDart4.0 英雄之旅-教程-01介绍

英雄之旅应用程序涵盖了Angular的核心基础。您将构建一个具有许多功能的基本应用程序，您可以在完整的数据驱动应用程序中找到许多功能：获取和显示英雄列表，编辑所选英雄的细节，以及浏览不同视图英雄数据。...您将学习以下内容：使用内置指令来显示和隐藏元素并显示英雄数据列表。创建组件以显示英雄细节并显示一系列英雄。对只读数据使用单向数据绑定。添加可编辑字段以更新具有双向数据绑定的模型。...将组件方法绑定到用户事件，如按键和点击。允许用户从主列表中选择一个英雄，并在详细信息视图中编辑该英雄。用管道格式化数据。创建一个共享服务来组合英雄。使用路由在不同视图及其组件之间导航。 ...点击"Back"将返回到面板，顶部的链接带你进入不同的主视图，单击“Heroes”,应用将显示“Heroes”主列表视图。 ? 当您单击不同的英雄名称时，列表下面的只读迷你细节反映了新的选择。...您可以单击“查看详细信息”按钮，获取所选英雄的可编辑详细信息。下图捕获所有导航选项。 ? 应用动图 ? 接下来您将一步一步地构建“英雄之旅”应用程序。

1.3K2 0

使用Ionic2开发Todo应用0 开始之前1 创建新的Ionic 2工程2. 设置主页（Home page）3 持久化数据保存4 总结

1 创建新的Ionic 2工程我们将通过生成一个基于“空白”模板的新项目开始。这是一个空的项目框架，但有一些示例代码供我们使用。...不同属性的行为可能会有所不同，取决于在什么平台上运行，以iOS为例,将end会将按钮放到导航栏的右边。...我们现在导入import我们新增的AddItemPage组件到HomePage，当用户点击新增时我们就创建出该视图。...2.7 查看项目现在，我们想要一个功能，就是用户点击todo列表里面的某一项，然后可以看到该项的细节信息（例如：这里只有描述可以看了，实际可以根据需要扩展，呵呵）。...4 总结在本教程中我们已经介绍了如何实现很多Ionic 2应用的常用功能：创建视图监听和处理事件视图之间的导航在视图之间传递数据建立双向数据绑定保存数据显然还有很多我们可以做，使这个应用程序更漂亮

6.1K5 0

Angular 快速学习笔记(1) -- 官方示例要点

Angular CLI 命令 ng generate service 会通过给 @Injectable 装饰器添加元数据的形式 providedIn: 'root', 当你在顶层提供该服务时，Angular...Angular 的最佳实践之一就是在一个独立的顶级模块中加载和配置路由器，它专注于路由功能，然后由根模块 AppModule 导入它 b. ng generate module app-routing...添加路由，路由定义会告诉路由器，当用户点击某个链接或者在浏览器地址栏中输入某个 URL 时，要显示哪个视图，因此路由包含两个属性： i. path：一个用于匹配浏览器地址栏中 URL 的字符串...ii. component：当导航到此路由时，路由器应该创建哪个组件 const routes: Routes = [ { path: 'heroes', component: HeroesComponent...HttpClient 是 Angular 通过 HTTP 与远程服务器通讯的机制 b.

3.6K0 0

Angular 快速学习笔记(1) -- 官方示例要点

Angular CLI 命令 ng generate service 会通过给 @Injectable 装饰器添加元数据的形式 providedIn: 'root', 当你在顶层提供该服务时，Angular...Angular 的最佳实践之一就是在一个独立的顶级模块中加载和配置路由器，它专注于路由功能，然后由根模块 AppModule 导入它 b. ng generate module app-routing...添加路由，路由定义会告诉路由器，当用户点击某个链接或者在浏览器地址栏中输入某个 URL 时，要显示哪个视图，因此路由包含两个属性： i. path：一个用于匹配浏览器地址栏中 URL 的字符串...ii. component：当导航到此路由时，路由器应该创建哪个组件 const routes: Routes = [ { path: 'heroes', component: HeroesComponent...HttpClient 是 Angular 通过 HTTP 与远程服务器通讯的机制 b.

3.7K5 0

8分钟为你详解React、Angular、Vue三大框架

当渲染一个组件时，可以传入被称为 "props "的值。 ? React中声明组件的两种主要方式是通过功能函数组件和基于类的组件。功能函数组件功能组件是用一个函数声明，用来返回一些JSX。 ?...类组件基于类的组件是使用ES6类来声明的。它们也被称为 "有状态 "组件，因为它们的状态可以在整个组件中保持，并且可以通过props传递给子组件。 ?...版本9 Angular 9已于2020年2月6日发布。第9版在默认情况下使用Ivy编译器。Angular可以与TypeScript 3.6和3.7兼容。...该组件显示了一个按钮，并打印出按钮被点击的次数。 ? 2、模板 Vue使用基于HTML的模板语法，允许将渲染的DOM绑定到Vue实例的底层数据。...此外，当某些浏览器事件发生在按钮或链接上时，使用前端路由器可以有意识地转换浏览器路径。 Vue本身并没有自带前端路由。

22.1K2 0

Angular 英雄示例教程

在本教程的最后，你的应用可以做下面的工作：使用Angular 的内置指令（Angular directives）来显示 / 隐藏元素，并显示英雄数据的列表。...创建 Angular 组件（Angular components）以显示英雄的详情，并显示一个英雄数组。为只读数据使用单向数据绑定。添加可编辑字段，使用双向数据绑定来更新模型。...为用户事件绑定组件方法（component methods），比如相应用户键盘输入和点击。让用户可以在主列表中选择一个英雄，然后在详情视图中编辑他。使用管道来格式化数据。...创建共享的服务来管理这些英雄。使用路由在不同的视图及其组件之间导航。你将学到足够的 Angular 知识和足够的信心来让 Angular 提供你所需的支持。...你可以点击 “View Details（查看详情）” 按钮进入所选英雄的编辑视图。下面这张图汇总了所有可能的导航选项。

1.4K3 0

Angular2 之路由与导航基础知识路由模块组件路由路由守卫

导航是很简单的，只是不同页面之间的切换，路由是实现导航的一种。一个url对应的一个页面，在angular2中是一个组件。定义一个规则。...守卫可以返回一个boolean值，为true时，导航过程继续，为false时，导航被取消，当然这时候也可以被导航到其他页面。... CanActivate 使用CanActivate来处理导航路由，需要在路由配置中，添加导入AuthGuard类，修改管理路由并通过CanActivate属性来引用AuthGuard。...当用户要导航到外面时，该怎么处理这些既没有审核通过又没有保存过的改动呢？我们不能马上离开，不在乎丢失这些改动的风险，那显然是一种糟糕的用户体验。我们应该暂停，并让用户决定该怎么做。...创建自定义策略我们将需要实现抽象类PreloadingStrategy和preload方法。在异步加载特征模块和决定是否预加载它们时，路由器调用preload方法。

3.3K1 0

Angular的12个经典问题，看看你能答对几个？（文末附带Angular测试）

Angular 2是一个平台，不仅是一种语言更好的速度和性能更简单的依赖注入模块化，跨平台具备ES6和Typescript的好处。灵活的路由，具备延迟加载功能更容易学习 3. ...Angular应用程序具有路由器服务的单个实例，并且每当URL改变时，相应的路由就与路由配置数组进行匹配。...在成功匹配时，它会应用重定向，此时路由器会构建ActivatedRoute对象的树，同时包含路由器的当前状态。在重定向之前，路由器将通过运行保护（CanActivate）来检查是否允许新的状态。...这通常用在setter中，当类中的值被更改完成时。可以通过模块的任何一个组件，使用订阅方法来实现事件发射的订阅。...提议的功能使用反应式扩展（RxJS）根据时间的变化，数组成员可以异步获取目前Angular 2正式版已经发布，部分产品也已经对Angular 2正式版进行了支持。

17.3K8 0

ionic之AngularJS扩展2 移动开发

AngularJS的路由模块（ng-route），而是使用了angular-ui项目的ui-route模块。...配置状态机需要指出的是，状态的划分以及每个状态的元信息（比如模板、url等）是在配置阶段通过$stateProvider完成的： angular.module("ezApp",["ionic"])...点击该按钮将返回前一个模板。...默认为center，居中对齐 no-tap-scroll - 点击导航栏时是否将内容滚动到顶部。允许值为：true | false。...点击回退按钮将返回前一个视图。示例中的代码在上一节的基础上增加了回退按钮，切换到小说页再看看！

3.5K2 0

Angular 从入坑到挖坑 - 路由守卫连连看

一、Overview Angular 入坑记录的笔记第六篇，介绍 Angular 路由模块中关于路由守卫的相关知识点，了解常用到的路由守卫接口，知道如何通过实现路由守卫接口来实现特定的功能需求，以及实现对于特性模块的惰性加载...对应官方文档地址：路由与导航配套代码地址：angular-practice/src/router-combat 二、Contents Angular 从入坑到弃坑 - Angular 使用入门 Angular...UrlTree：取消当前的导航，并导航到路由守卫返回的这个 UrlTree 上（一个新的路由信息） 4.2.1、CanActivate：认证授权在实现路由守卫之前，可以通过 Angular CLI...4.2.3、CanDeactivate：处理用户未提交的修改当进行表单填报之类的操作时，因为会涉及到一个提交的动作，当用户没有点击保存按钮就离开时，最好能暂停，对用户进行一个友好性的提示，由用户选择后续的操作...因此这里可以使用惰性加载的方式在请求具体的模块时才加载对应的组件惰性加载只针对于特性模块（NgModule），因此为了使用惰性加载这个功能点，我们需要将系统按照功能划分，拆分出一个个独立的模块首先通过

3.7K3 0

AngularDart 4.0 高级-生命周期钩子顶

生命周期序列通过调用其构造函数创建组件/指令后，Angular在特定时刻按以下顺序调用生命周期钩子方法：钩子作用和时机 ngOnChanges Angular（重新）设置数据绑定输入属性时响应。...其他生命周期挂钩其他Angular子系统除了这些组件钩子可能有自己的生命周期钩子。例如，路由器也有自己的路由器生命周期挂钩，可以让我们利用路由导航中的特定时刻。...DoCheck 使用自定义更改检测实现ngDoCheck方法。看看Angular多久会调用这个钩子，并在更改日志后观察它。 AfterView 通过视图显示Angular的意图。...peek-a-boo存在以显示Angular如何按预期顺序调用钩子。此快照反映用户单击“创建...”按钮然后单击“销毁...”按钮后日志的状态。 ?...如果用户点击Update Hero按钮，日志会显示另一个OnChanges和两个更多的DoCheck，AfterContentChecked和AfterViewChecked三元组。

6.2K1 0

Angular系列教程-第五节

它会标出该模块自己的组件、指令和管道，通过 exports 属性公开其中的一部分，以便外部组件使用它们。 NgModule 还能把一些服务提供商添加到应用的依赖注入器中。...bootstrap —— 根组件，Angular 创建它并插入 index.html 宿主页面。该模块的 declarations 数组告诉 Angular 哪些组件属于该模块。...当你创建更多组件时，也要把它们添加到 declarations 中。每个组件都应该（且只能）声明（declare）在一个 NgModule 类中。...Angular 把组件和服务区分开，以提高模块性和复用性。通过把组件中和视图有关的功能与其他类型的处理分离开，你可以让组件类更加精简、高效。理想情况下，组件的工作只管用户体验，而不用顾及其它。...3.路由在用户使用应用程序时，Angular 的路由器能让用户从一个视图导航到另一个视图。

2.9K2 0

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

如果您更改HeroService构造函数，则必须查找并更新您创建服务的每个位置。在多个地方修补代码是容易出错的，并增加了测试负担。每次使用新建时都会创建一个服务。...现在Angular知道在创建一个新的AppComponent时要提供一个HeroService实例。在依赖注入页面阅读更多关于依赖注入的内容。...时创建一个HeroService的新实例。...当你点击一个英雄名字时，应用程序应该显示英雄名单和英雄详情视图。异步英雄服务 HeroService立即返回模拟英雄列表; 它的getHeroes（）签名是同步的。...阅读下一个教程页面中有关Angular组件路由器和视图之间的导航。附录：数据延迟要模拟一个缓慢的连接，请将以下getHeroesSlowly（）方法添加到HeroService。

2.9K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭