我可以挂接到Angular Router的组件创建部分吗？
可以的，Angular Router是Angular框架中用于实现路由功能的模块。它可以帮助我们在不同的组件之间进行导航和页面切换。在Angular中，我们可以通过定义路由配置来指定不同URL路径与相应组件的关联关系。
要将组件挂接到Angular Router的创建部分，我们需要进行以下步骤：
- 首先，在Angular项目中安装并引入Angular Router模块。可以使用以下命令进行安装：
- 首先，在Angular项目中安装并引入Angular Router模块。可以使用以下命令进行安装：
- 在应用的根模块（通常是AppModule）中导入RouterModule，并将其添加到imports数组中：
- 在应用的根模块（通常是AppModule）中导入RouterModule，并将其添加到imports数组中：
- 在组件的创建部分，我们需要定义路由配置。可以在一个单独的文件中创建路由配置，也可以直接在组件文件中定义。以下是一个简单的路由配置示例：
- 在组件的创建部分，我们需要定义路由配置。可以在一个单独的文件中创建路由配置，也可以直接在组件文件中定义。以下是一个简单的路由配置示例：
- 在组件的模板文件中，我们可以使用Angular Router提供的指令来实现导航和页面切换。例如，可以使用
routerLink指令来定义一个链接，点击该链接时会导航到指定的路由： - 在组件的模板文件中，我们可以使用Angular Router提供的指令来实现导航和页面切换。例如，可以使用
routerLink指令来定义一个链接，点击该链接时会导航到指定的路由： - 在上述示例中，点击"Home"链接将导航到根路径，点击"About"链接将导航到"/about"路径。
以上就是将组件挂接到Angular Router的创建部分的步骤。通过使用Angular Router，我们可以轻松实现组件之间的导航和页面切换，提供更好的用户体验。
关于腾讯云相关产品和产品介绍链接地址，由于要求不能提及具体品牌商，我无法给出具体的推荐链接。但腾讯云也提供了一系列与云计算相关的产品和服务，你可以通过访问腾讯云官方网站，查找相关产品和文档。
相关·内容
我正在尝试将应用程序的管理重写为Angular2。我有3个组件(AppComponent、SystemComponent和ShopComponent)。
AppComponent:
import {Component} from 'angular2/core';
import {RouteConfig, Router, ROUTER_DIRECTIVES} from 'angular2/router';
import {SystemComponent} from "./system.component";
@Component({
sel
浏览 3提问于2016-01-16得票数 1
回答已采纳
当父组件更改属性时，子组件不会更新param @Input。
我遇到的所有类似的问题都不能解决这个问题。
示例：
或者.
第一次创建该属性时，该属性将被共享。但是，当我从[(ngModel)]指令(在父指令中找到)进行修改时，它不会将更改传播到子组件，因此子组件不会接收更新的数据。(与以前的，在开始时提供的一样)。
这是父组件：
/**
* Created by cnoe la bestia on 13/12/2021
**/
import {Component, OnInit} from '@angular/core';
import {Pedido, Status}
浏览 3提问于2021-12-30得票数 0
回答已采纳
我目前正在尝试构建我们的Angular1应用程序的Angular2原型(基于alpha44) (相当复杂)，并且在使用路由和子路由时，我正在尝试找到最佳的模型/数据架构。
在我的示例中，通过从路由创建的子组件，我希望访问父组件(托管router-outlet)的属性。
但是，当您从router-outlet创建组件时，您不能再使用@Input和@Output。那么，除了基本routeParams和静态routeData之外，注入一些数据/属性的最佳实践是什么？
如何在没有太多耦合的情况下与父组件通信？
浏览 0提问于2015-10-24得票数 6
1回答
我在一个项目中使用了角2，我想在模板中呈现一个部分，而不创建一个组件。这有可能吗？
import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
@Component({
selector: 'ng2-showroom-app',
providers: [],
templateUrl: 'app/views/ng2-showroom-template.html',
d
浏览 4提问于2016-03-03得票数 6
回答已采纳
1回答
尝试编写一个简单的登录页面时，我在理解为什么.components绑定不起作用方面遇到了一些困难。
示例
模板：login.html
<form>
<fieldset>
<label>Email</label>
<input id="email" type="email" ng-model="login.user.email">
<label>Senha</label>
<inpu
浏览 1提问于2017-03-30得票数 0
回答已采纳
1回答
我有一个警卫服务，这应该改变我的app.componant成员.为此，我在app.componant创建了一个setter。这个策划人应该由警卫执行.我想通过输入和输出来实现这一点。
import {AppComponent} from './app.component';
import {Injectable, Input} from '@angular/core';
import { Router, CanActivate } from '@angular/router';
@Injectable()
export class AuthGu
浏览 0提问于2018-02-28得票数 0
我是一个非常新的角度，并试图创建一个小应用程序，利用动态路由。我有一个“成员”页面，其中列出了所有当前成员，如果您单击一个特定成员，您将加载另一个用于显示用户详细信息的页面。目前，我只是试图显示“您已单击xxxs配置文件”，但我有困难，如何让点击的用户名显示。
成员构成部分：
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Params, Router } from '@angular/router';
@Component({
selector: &#
浏览 2提问于2018-05-29得票数 1
回答已采纳
我在试着让我的儿童路由器开始工作。目标是创建类似于这个中的导航条。因此，我们有一个路由器，它包含所有主选项卡，每个选项卡都有自己的路由器，它们导航到相应的视图或组件。
然而，我得到了以下错误：
EXCEPTION: Error during instantiation of Router! (RouterLink -> Router).
ORIGINAL EXCEPTION: Route config should contain exactly one "component", "loader", or "redirectTo" prop
浏览 4提问于2016-03-04得票数 1
回答已采纳
我正在创建一个新闻门户，并且我有一个类别组件和一个导航栏组件。这两个组件都包含类别。我的目标是加载特定类别的新闻，如体育、娱乐..我尝试的是，我的类别组件和导航栏组件都指向相同的新闻组件，以加载特定类别的新闻。 问题是我不能这样做，因为当我试图从导航菜单中选择一个类别时，它不起作用，而当我尝试从类别组件中尝试时，它有时起作用，有时不起作用 我想从导航菜单中加载类别，而不管它是什么页面，而且它也不应该干扰类别组件 类别组件和导航栏组件都指向相同的新闻组件 在这个问题上，有人能帮我吗？ 我已经粘贴了我的项目中的代码 navbar.component.ts import { Component,
浏览 10提问于2020-04-04得票数 0
我更改了路径，使我的主页成为appcomponent，现在我得到了这个错误：
Error: Uncaught (in promise): Error: Cannot find primary outlet to load 'AppComponent'
对这是什么有什么想法吗？
我的路线：
import {Routes} from "@angular/router";
import {PatientComponent} from "./patient/patient.component";
import {AppComponent} from &#
浏览 3提问于2017-06-05得票数 0
回答已采纳
我的应用程序不会导航到新的页面，所以在googling中，我发现我应该将RouterModule ( RouterLink声明的地方)导入到使用此模板的模块中。
我得到了错误:类@NgModule上的两个不兼容的装饰器
错误类'ShoppingCartComponent‘列在NgModule 'AppModule’的声明中，但不是指令、组件或管道。要么从NgModule的声明中删除它，要么添加一个合适的角度装饰器。
在购物中-Cart.Compent.ts：
import { NgModule } from '@angular/core';
import { R
浏览 4提问于2020-08-29得票数 0
3回答
我使用的是角6.1，我试图设置一个应用模块和一个功能模块(称为实体模块)使用惰性路由。我想要创建一个连接到实体模块中的组件的路由/entities/list，。但我不能让这条路开始工作。相反，当我导航到/list时，将显示该组件。为什么我的路由忽略父路径"/entities“路径？
app.module.ts：
import {NgModule} from '@angular/core';
import {AppComponent} from './app.component';
import {AppRoutingModule} from '.
浏览 0提问于2018-10-23得票数 2
回答已采纳
2回答
我已经用angular-cli创建了angular 2项目。我创建了单独的AppRoutingModule，它导出RouterModule并添加到AppModule imports数组中。
我也有由angular-cli创建的appComponent。
app.component.html
<nav>
<a *ngFor="let view of views" routerLink="{{ view.address }}" routerLinkActive="active">{{ view.text }}</a&
浏览 3提问于2016-10-18得票数 23
回答已采纳
在有人标记此问题重复之前，我尝试了以下问题：
考虑到这些问题，我尝试了解决办法，但没有结果。所以我来这里问我自己的问题。现在来问这个问题：
我已经创建了一个新的应用程序，在那里我试图从Home.Component与router.navigate()的App.Component路由。以下是供参考的文件：
应用程序Component.html
<p>App component works</p>
<button (click)="onClick()">Click Home</button>
App.component.ts
im
浏览 2提问于2020-06-14得票数 0
回答已采纳
我在教自己Angular2，我正在看的课文说：
路由器定位或创建与路由关联的组件实例，该组件的视图显示在RouterOutlet指令定义的位置。
代码示例：
import { Component } from 'angular2/core';
import {ProductListComponent} from './products/product-list.component';
import {ProductService} from './products/product.service';
import {HTTP_PROVID
浏览 0提问于2016-08-29得票数 4
2回答
我正在尝试使用引导程序创建一个弹出程序库，下面是版本，为什么他不给我看设计呢？有人知道问题出在哪里吗？
package.json*
"private": true,
"dependencies": {
"@angular/animations": "~11.0.1",
"@angular/cdk": "^11.0.2",
"@angular/common": "~11.0.1",
"
浏览 3提问于2021-01-13得票数 0
我在第一页上有一个订单列表，我想在另一个页面上显示其中一个订单的详细信息，以便能够更新它，并在返回主页时保存它。下面是我的代码：
app.component.ts：
import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {HomeComponent} from './home/home.component';
import {OrderDetailsComponent} fro
浏览 0提问于2016-01-21得票数 1
1回答
我用ng cli创建了一个全新的角项目，但没有添加任何内容。然后我跑了
ng build -prod -vc=true -sm -oh=none
我用源地图探险家来看看树被摇晃了什么。我看到了一堆我没有使用的rxJ东西，比如可观察的，合并映射等等。这正常吗？这是因为其他节点模块都在使用它吗，比如角？是我14%的供应商包吗？
Angular CLI: 1.5.0
Node: 6.11.0
OS: win32 x64
Angular: 5.2.2
... animations, common, compiler, compiler-cli, core, forms
... http, langua
浏览 0提问于2018-01-31得票数 1
回答已采纳
import { Component, Input, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { FetchService } from '../fetch. Service';
@Component({
selector: 'app-first',
templateUrl: './first.component.html',
styleUrls: ['./first.com
浏览 6提问于2021-05-10得票数 1
回答已采纳
我有一个角形6/ Ionic 4懒惰加载标签模板，正确工作。主页面有一个路由器出口，制表符有次要的路由器出口.但是，我无法在主菜单中创建显示选项卡页的routerLink。
只有在选项卡页上还没有运行时，此routerLink才能工作。例如：
测试页面上的If : /test
单击链接
正确链接到:选项卡/(关于:关于)
链接到选项卡页
如果已经在home选项卡上(并单击链接)，最终的url是：
/tabs/(about:about//home:home)
如何创建始终链接到以下内容的routerLink？
/tabs/(about:about)
我在这份打字稿中也有同样的
浏览 0提问于2018-07-07得票数 15
4回答
角度获取当前路径
、、
我正在尝试创建定制的面包屑。我想得到目前的路线，没有数据。
我已经尝试了下面的，但它是与数据ID和路由不工作。
请给我专家建议。
实际链接：
<ul >
<li class="breadcrumb-item" *ngFor="let breadLink of breadcrumbListObj"><a [routerLink]="breadLink.link">{{breadLink.name}}</a></li>
</ul>
TS
import { Componen
浏览 0提问于2019-06-06得票数 2
1回答
在我的Angular2应用程序中，有一些页面是由多个组件组成的。
在我的app.component.html中，我有以下内容：
<router-outlet></router-outlet>
在组件的html中，如下所示：
<div class="container dashboard page">
<app-nav></app-nav>
<div class="main">
<p></p>
</div>
<app-foote
浏览 2提问于2016-07-06得票数 0
我特别遇到了这个错误；
Unexpected directive 'LoginComponent' imported by the module 'AppModule'. Please add a @NgModule annotation.
有人知道它是用来做什么的吗？我的app-routing.module就是这样；
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {
浏览 23提问于2019-07-05得票数 0
回答已采纳
我正在为npm创建一个Angular 2库，并且我希望允许用户在一条import语句中实现所有组件。
例如，在导入ROUTER_DIRECTIVES时
import {ROUTER_DIRECTIVES, Router} from '@angular/router';
directives: [ROUTER_DIRECTIVES]
我如何才能做到这一点？
浏览 13提问于2016-07-28得票数 0
回答已采纳
AuthComponent
import { TopnavComponent } from './../topnav/topnav.component';
import { Component, OnInit,ViewContainerRef } from '@angular/core';
import {AuthService} from "./auth.service";
import { NgForm } from '@angular/forms';
import {Router} f
浏览 1提问于2018-01-05得票数 2
2回答
我正在尝试调用私有登录：LoginComponent，然而，当我添加私有登录：LoginComponent时，我的网站无法加载。在我将Login添加到构造器之前，我的网站加载并运行良好。我做错了什么？我可以不调用私有登录：LoginComponent吗？我在下面附加了类LoginComponent。
import { Component, OnInit, ViewChild } from '@angular/core'
import { Router } from '@angular/router'
import * as Rx from "rxjs&#
浏览 0提问于2018-03-04得票数 0
2回答
我已经在app.module.ts中注册了这个组件：
import { Component } from '@angular/core';
import { MessageService } from 'primeng/api';
@Component({
selector: 'app-modal',
templateUrl: './modal.component.html',
styleUrls: ['./modal.component.css'],
providers: [Messag
浏览 0提问于2018-12-07得票数 0
我有一个角度组件，应该显示不同的信息，取决于哪个按钮被点击到它。如果单击按钮1，我希望在component2中设置component2并使用ngIf显示正确的信息。如果单击按钮2，我希望设置button2=true并使用ngIf显示正确的信息。
这两个组件具有不同的urls，并且不是彼此的父/子组件。
下面的代码是我试图实现的一个简单的例子。
是否按下按钮1或按钮2，我如何与组件2通信？
comp1.component.ts
import { Component, OnInit } from '@angular/core';
import { Router } from
浏览 3提问于2021-01-22得票数 0
回答已采纳
1回答
我有一个角度项目，我想要链接到其他页面上的书签。所以在我的html中，我有这样的链接： <a href="#products" routerLink="overview">products</a> 但是当页面编译并运行时，我看到这个链接被重写为如下内容： <a _ngcontent-kfm-c5="" href="/overview/overview" routerlink="overview" ng-reflect-router-link="overview">
浏览 31提问于2019-05-14得票数 0
1回答
嗨，我正在学习角，我有一个关于部件的问题。我有两个成分，一个根，另一个。当我从根到另一个根时，我将看到根控制器的内容。它看起来像是创建子组件，使子组件不受父组件的影响。但是如何显示一个全新的模板呢？这是我的两个控制器。我还可以验证，从html页面创建的第二个组件是在根组件的部分下创建的。
这是根控制器。
market-data.component.ts
import { Component, OnInit, Inject } from "@angular/core";
import { MarketDataService } from "./market-data.se
浏览 0提问于2018-06-15得票数 0
回答已采纳
1回答
我正在处理角5，在运行我的应用程序时我会出错，
你能帮我解决这个问题吗？提前谢谢。
这是正在进行的代码，所以在下面的代码中很少有导入模块不被使用。
我的应用程序模块
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {Header} from './ts/header'
浏览 1提问于2018-01-14得票数 0
1回答
我刚从开始，在我的生活中，我不知道为什么我不能让对组件的引用工作。
首先，我用：tns创建测试-ng生成初始文件。
接下来，我创建以下文件结构
App_Resource
components
---app
------app.component.ts
---create
------create.component.ts
------create.component.html
app.module.ts
app.routing.ts
main.ts
这是app.component.ts
import { Component } from "@angular/core";
imp
浏览 0提问于2018-01-26得票数 3
回答已采纳
2回答
我正在使用材料设计，并设置了一个dialogService来动态加载MdDialog。我试图使用搜索过滤器创建一个搜索对话框，当它提交时，它会将您带到搜索结果组件路由。我不知道如何将搜索数据输出到搜索结果组件。
./对话框-service.ts
@Injectable()
export class DialogService {
private dynamicModalComponent: DialogComponent;
public init(dynModal: DialogComponent) {
this.dynamicModalCompone
浏览 0提问于2017-09-06得票数 1
回答已采纳
角5-
以下是npm模块(package.json)-
"@angular/animations": "^5.0.0",
"@angular/cdk": "^5.0.0-rc.2",
"@angular/common": "^5.0.0",
"@angular/compiler": "^5.0.0",
"@angular/core": "^5.0.0",
"@angular/form
浏览 5提问于2017-12-05得票数 27
回答已采纳
1回答
我试图使用角飞镖样本之旅的英雄，作为一个模型的WebApp，我正试图建立。
我将其更改为使用FireBase作为数据提供程序，而不是使用mockClients。
这是app组件：
import 'package:angular/angular.dart';
import 'package:firebase/firebase.dart';
import 'package:firebase/firestore.dart' as fs;
import 'src/todo_list/hero.dart';
import 'pack
浏览 0提问于2018-10-17得票数 0
回答已采纳
我正在学习angular2，有时发现自己有点困惑该在哪里注入依赖项。例如，在使用RouteParams时
import {RouteParams} from 'angular2/router';
我们只需将其传递给构造函数方法，就可以运行了：
constructor(private _photoService: PhotoService, private _routeParams: RouteParams){
}
但是，当我们从相同的模块'angular2/router'中使用ROUTER_DIRECTIVES时
import {ROUTER_DIREC
浏览 10提问于2017-02-24得票数 0
请不要标记这个“.的副本”。我读过另一篇文章，描述了这个错误。我已经尝试过这些解决方案。
如果您查看下面的代码，您将看到我在app.module.ts中导入了app.module.ts，在登录-modal.Component.ts中导入了CommonModule，但是这个错误仍然存在。我的代码中还有其他一些错误，不允许这些解决方案为我工作。
控制台错误在底部。
非常感谢分享您的专业知识。我卡住了:-/
// ----------------------------------------------------------------------------
// src/app/app.mo
浏览 2提问于2017-02-20得票数 0
1回答
角度匹配中的路由
、、、、
我试图将路由添加到角中的角材料Mat对话框中。但有一个问题正在发生。
当我尝试添加路由URL时，手动从
https://localhost:3200
至
https://localhost:3200/login
或
https://localhost:3200/signin
不会弹出来
Tab交换问题
此外，还有另一个问题，当打开对话框进行登录时，如果我选项卡切换到SignIn，则URL没有变化。
Navbar.component.ts (对话框初始化组件)
import { Component, OnInit, Output, EventEmitter, Inject } from &#
浏览 4提问于2020-07-20得票数 0
回答已采纳
1回答
刚从角2开始，使用angular2种子应用程序：。我已经创建了一个组件，但是它不会显示在页面上，该组件位于一个名为external_components的目录中，与组件处于相同的级别：
import {Component} from 'angular2/core';
@Component({
selector: 'SiteQualification',
template: '<div>hello service external</div>',
})
export class SiteQualification
浏览 3提问于2016-04-26得票数 1
回答已采纳
2回答
我正在尝试在我的应用程序中实现子路由器。我所做的是，在点击侧菜单时，我导航到了这个孩子
this._router.navigate(['/parent/child']);
但是它没有执行子组件，而是再次执行父组件。
app.module.ts中的路由器
const appRoutes: Routes = [
{ path: 'login', component: LoginComponent },
{path:'parent',
children:[
{path: '', compo
浏览 0提问于2018-06-25得票数 1
回答已采纳
我正在尝试在我的angular应用程序中实现一个可定制的导航栏。
这是我的app.component模板
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="
浏览 12提问于2017-06-27得票数 1
1回答
我工作的角度2，其中我有应用组件，加载其他组件，路由器-出口，也有链接到登录组件。但是我想要保存一些全局变量，它可以在我的应用程序组件和登录组件上访问，这样我就可以隐藏并显示登录链接。
以下是我的应用程序组件：
import {Component, View, Inject} from 'angular2/core';
import {NgIf} from 'angular2/common';
import {Router, RouteConfig, RouterLink, RouterOutlet, ROUTER_PROVIDERS} from 'an
浏览 3提问于2016-01-11得票数 3
我使用的是离子型5.0.0应用程序andIi，其中有一个聊天页面和主页。我想将聊天页面包含到主页中。相当于ng-include。
我在我的exports[]中添加了chat.module.ts，如下所示
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from &
浏览 4提问于2019-11-13得票数 1
1回答
嗨，我正在努力为我的角应用程序创建儿童路由，这是我到目前为止所拥有的：
import {bootstrap} from 'angular2/platform/browser'
import {CommercifyComponent} from './commercify.component'
import {ROUTER_PROVIDERS } from 'angular2/router';
import {HTTP_PROVIDERS} from 'angular2/http';
bootstrap(Commercify
浏览 3提问于2016-03-08得票数 2
回答已采纳
1回答
index.html
<!DOCTYPE html>
<html>
<head>
<base href="/">
<title>test website</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="sty
浏览 3提问于2017-09-25得票数 1
3回答
我是angular 6的新手，我正在尝试使用路由设置一个应用程序，但我无法使用ng serve加载内容。页面加载时没有错误，但为空。我不确定我遗漏了什么，这样当我导航到localhost:4200时，来自HomeComponent的内容就会显示出来。谢谢!
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule ,CUSTOM_ELEMENTS_SCHEMA,NO_ERRORS_SCHEMA} from '@angular/core';
浏览 1提问于2018-07-02得票数 1
2回答
我试图从Angular2组件中的url中获取查询参数。
版本："angular2"："npm:angular2@2.0.0-beta.12"，
我正在尝试提取组件中的id查询param并显示它。
这是我的请求。
localhost:8080/index.html?id=1
boot.ts
import 'reflect-metadata';
import 'angular2/bundles/angular2-polyfills';
import { bootstrap } from 'angular2/platform/b
浏览 1提问于2016-03-30得票数 2
回答已采纳
1回答
我有一个MainComponent和一个加载子组件的<router-outlet>。在/messages-url上加载messagesComponent。我在MainComponent上添加了一个均匀侦听器，当用户在<router-outlet>所在的容器中滚动时会触发该监听器，如下所示：
@Component({
selector: "main-component",
template: `
<div (scroll)="onContainerScrollEvent($event)">
浏览 2提问于2017-04-18得票数 0
回答已采纳
我似乎无法让Webpack或Browserify与UI-Router一起工作。有人能帮上忙吗？
下面是我的模块文件：
"use strict";
require("angular");
angular
.module("app", [require("angular-ui-router")])
.config(require("./app.routes"));
和我的路由文件：
"use strict";
module.exports = function($urlRouteP
浏览 1提问于2014-12-15得票数 2
在npm安装之后，我运行了角码，它给出了以下错误:无法解析ContactComponent：(?)的所有参数。有人告诉我为什么吗？
这是我的密码
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-contact',
templateUrl: './contact.component.html',
styleUrls: ['
浏览 0提问于2019-08-27得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
