如何在angular中对<router-outlet>执行overflow-y？
在Angular中，<router-outlet>是一个用于动态加载组件的指令，它负责显示当前路由对应的组件内容。要对<router-outlet>执行overflow-y，可以通过以下步骤实现：
- 首先，在你的组件的CSS文件中，找到包含<router-outlet>的父元素的选择器。例如，如果<router-outlet>位于AppComponent组件中，你可以在app.component.css文件中找到对应的选择器。
- 在该选择器中，添加overflow-y属性并设置为所需的值。例如，如果你希望<router-outlet>在垂直方向上出现滚动条，可以将overflow-y设置为scroll。
示例代码如下：
/* app.component.css */
.parent-selector {
overflow-y: scroll;
}- 保存CSS文件并重新编译你的Angular应用程序。在运行时，<router-outlet>所在的父元素将具有指定的overflow-y样式，从而实现垂直滚动。
需要注意的是，<router-outlet>本身并不具有overflow-y属性，因为它只是一个占位符指令，用于动态加载组件。因此，我们需要通过设置其父元素的样式来实现对<router-outlet>的overflow-y控制。
关于Angular和<router-outlet>的更多信息，你可以参考腾讯云的Angular产品文档：Angular产品介绍。
相关·内容
1回答
如何在angular4项目中使用多个<router-outlet>？
当我转到/docs路径时，-> WelcomeComponent将显示在outlet中，其中name = welcome和所有其他路由将显示在默认outlet中。
app.routing.ts file
import { Routes, RouterModule } from '@angular/router'
import { ModuleWithProviders } from '@angular/core/src/metadata/ng_module'
import {
浏览 4提问于2018-02-15得票数 1
我是angular 4的新手。我发现在angular中有一种方法可以使用@Input将数据从父组件传递到子组件，如下所示：
<child [dataToPass]="test"></child>
我的问题是如何使用路由器做同样的事情。在路由器中，没有像输入这样的子定义；它只有<router-outlet></router-outlet>，那么如何使用@Input传递数据呢？
浏览 0提问于2017-09-28得票数 2
2回答
如何在主干线上装载新线路
、、、
目前我对角质还不熟悉。我正在学习路由主题，但似乎停留在我想要在主路由中加载新路由的点上。我的app.module看起来就像
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import {HttpModule} from '@angular/http';
import {
浏览 8提问于2017-09-02得票数 0
回答已采纳
1回答
如何用角覆盖布线出口？
、、、
我想在角8应用程序中为页眉、页脚、左侧和主要内容制作通用布局。
我不想重新加载页眉，页脚和左侧时，每次用户导航从一个页面到另一个页面，除了一些页面，如登录，联系我们。
我的一些基本代码如下所示
app.componant.html
<div>
<router-outlet name="header"></router-outlet>
<div>
<router-outlet name="leftMenu"></router-outlet>
浏览 2提问于2020-01-29得票数 0
1回答
我有一个MainComponent和一个加载子组件的<router-outlet>。在/messages-url上加载messagesComponent。我在MainComponent上添加了一个均匀侦听器，当用户在<router-outlet>所在的容器中滚动时会触发该监听器，如下所示：
@Component({
selector: "main-component",
template: `
<div (scroll)="onContainerScrollEvent($event)">
浏览 2提问于2017-04-18得票数 0
回答已采纳
2回答
目标：
使用包含数据的变量b，以显示屏幕的消息"Got : 123“
问题：
为了减少硬编码和应用变量，我无法检索请求的结果。
如何在变量b的a中应用符号‘“？
信息：
Stackblitz：
谢谢
import { Component } from "@angular/core";
import { Router } from "@angular/router";
@Component({
selector: "my-app",
templateUrl: "./app.component.html",
s
浏览 5提问于2020-12-22得票数 0
我是Angular 2的新手，还处于学习阶段，但我陷入了一个问题，没有得到解决方案。请帮帮忙。
我已经做了一个登录视图，然后链接到它点击链接后，它将重定向到主页，然后点击一个链接，它将重定向到其他一些视图。
下面是我的代码结构：
app.routing.ts：
import { Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
浏览 0提问于2018-02-06得票数 0
Angular 2.3.0
我定义了一个像这样的角2模块：
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';
import { AppComponentRoute } from './components/+app/index';
import { AppCompon
浏览 6提问于2016-12-12得票数 1
1回答
首先:我的包含了我想要解决的确切案例。
就像标题说的那样，我有一个路由对话框(根据路由打开的对话框)，在这个对话框中，我希望有一个选项卡控件。每个选项卡也应该绑定到一个路由，所以我认为我的对话框也应该得到一个<router-outlet/>。
但是，当我在没有名称参数的情况下添加这个额外的<router-outlet/>时，呈现(我想)就会疯狂地呈现->结果:没有响应的应用程序。
当我添加name参数并配置路由时，它也不起作用。
const routes: Routes = [
{path: '', redirectTo: '/home
浏览 2提问于2020-08-11得票数 5
回答已采纳
这可能是我异常愚蠢的一个例子。 我已经完成了以下文档中的所有步骤：https://manfredsteyer.github.io/angular-oauth2-oidc/ 我已经设法让远程html登录页面返回，但angular应用程序正在大惊小怪--即： error loading discovery document HttpErrorResponse {headers: HttpHeaders, status: 200, statusText: "OK", etc. etc. etc. 和 core.js:12584 ERROR Error: Uncaught (in p
浏览 25提问于2019-03-20得票数 3
4回答
我刚来Angular，我需要一些建议
我在头部组件和路由器插座中使用引导导航栏(ul和li元素)。
<app-header></app-header>
<router-outlet></router-outlet>
我想根据当前显示的组件隐藏和显示某些导航栏项目。实现这一目标的最佳实践是什么？
浏览 1提问于2018-07-11得票数 0
3回答
我正尝试将微调器添加到我的应用程序中，但是微调器没有出现。
控制台或终端中未出现错误，但微调器未出现。
loader.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
@Injectable()
export class LoaderService {
public status: BehaviorSubject<boolean> = new BehaviorSubject<
浏览 17提问于2018-02-22得票数 0
回答已采纳
1回答
历史(推状态)向前/向后按钮不工作的角2路由器，我已经测试了这一点在Chrome和火狐。前进按钮永远不会工作，向后按钮只工作2个步骤，而UI没有根据后向按钮做出响应。
我有如下代码。
app.component.ts
import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES, Routes } from '@angular/router';
import { CrisisListComponent } from './crisis-list.component';
浏览 1提问于2016-05-12得票数 4
回答已采纳
1回答
两个路由器Angular5不工作
、、、、
principal.component.html
[...]
<a routerLink="/empresa-list">Abrir</a>
[...]
<main>
<router-outlet name="content"><router-outlet>
</main>
[...]
app.compoment.html
<router-outlet><router-outlet>
app.routing.module.ts
import { NgModule }
浏览 1提问于2018-01-08得票数 1
回答已采纳
我试图导航到角度6中的另一页。
在Ionic中，我们通过调用navCtrl.push('ExamplePage')来实现它；
在第六角中，我知道它们是路线，但我不能使用这样的按钮导航：
app.component.html
<button (click)='goToExamplePage()'>ExamplePage</button>
<router-outlet></router-outlet>
app.component.ts
import {Router} from '@angular/router
浏览 1提问于2018-09-20得票数 3
我对angular是个新手。
在我的应用程序组件html中
我有过
<div class="A">
<router-outlet ></router-outlet>
</div>
加载的任何组件都将位于div中。
我可以从中删除登录组件吗？
我试过这个动作它不工作吗？
浏览 0提问于2020-07-06得票数 0
在进一步研究之前，我正在尝试为我的角2组件编写单元测试，但我不知道如何编写测试，以检查我的RouteConfig的路径是否设置为“/documents”。我还希望有一个测试来验证我的模板中是否包含<router-outlet></router-outlet>。
这是我的组件
import { Component } from 'angular2/core';
import { CanActivate, RouteConfig, ROUTER_DIRECTIVES } from angular2/router';
import DocumentsC
浏览 4提问于2016-04-25得票数 1
回答已采纳
我有多个命名的出口和routerLinks，可以在Angular2组件中提供其他组件的插座。
<p><a [routerLink]="['1/1', {outlets: {'articlesOutlet1': ['article'],'articlesOutlet2': ['news'] }}]"> Provide outlets 1/1</a></p>
<p><a [routerLink]="['1/2',
浏览 3提问于2016-10-19得票数 1
回答已采纳
我有一个网站，我用角cli做的。我正在使用路由来交换内容。我的问题是，当我输入例如：www.website.de/login时，它会给我一个错误：404 Not Found。我和http-server . -p 80一起运营这个网站。我在服务器上有所有的ng build --prog文件(dist)。但是如果我用ng serve尝试这个本地命令，并输入：localhost:4200/login，它就能工作。
以下是我的重要文件：
index.html
<body>
<script type="text/javascript" src="http
浏览 0提问于2017-07-05得票数 2
如果我使用router.navigate()导航到其他路由，如何根据路由添加活动类
模板码
<div class="row">
<div class="col-lg-7">
<div class="row" *ngFor="let item of res " (click)="selected(item)">
{{item.name}}
<div>
<div>
浏览 1提问于2021-05-13得票数 1
回答已采纳
1回答
我想在我的Angular 2应用程序中更改布局。布局围绕着路由器-outler，这就是我的问题。所以我不能这样做：
<router-outlet name="navbar"></router-outlet>
<router-outlet></router-outlet>
<router-outlet name="footer"></router-outlet>
我的默认插座必须在布局的某些标签之间...为了说明我想要什么，我尝试了这个转换：
<router-outlet name=&#
浏览 0提问于2016-10-21得票数 1
在我的angular2应用程序中，我有一个全局路由器，它可以导航许多功能，例如主页和教程。现在，在我的教程组件中，我想设置另一个路由器来导航不同的步骤。
因此，从全局来看，以下是我的文件：
//main.ts:
// The browser platform with a compiler
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
// The app module
import { AppModule } from './app.module';
浏览 11提问于2016-08-10得票数 2
1回答
我正在创建一个布局对象，它有几个子对象，我希望父对象声明所有子对象的路由--最好不是在我的app.module.ts中。
这是我的HomeLayoutComponent标记
<router-outlet name="body"></router-outlet>
<router-outlet name="css"></router-outlet>
<router-outlet name="header"></router-outlet>
<router-outlet>
浏览 3提问于2016-10-26得票数 3
回答已采纳
5回答
我试图遵循本教程，但我得到了错误。
例外:秘密(在承诺中)：错误:不能匹配任何路由。URL段：“客户端”错误:无法匹配任何路由。URL段：“客户”
这是我的Router module
import {NgModule} from "@angular/core";
import {Routes, RouterModule} from "@angular/router";
import {AppComponent} from "./app.component";
import {ClientComponent} from "./cli
浏览 6提问于2017-03-18得票数 30
在我的应用程序组件中，我有头、和页脚指令，在中间还有路由器插座来呈现所有其他组件。
App.Component.html:
<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>
App.Component.ts:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
t
浏览 2提问于2017-10-22得票数 1
回答已采纳
1回答
所有人！ 我需要你的帮助。我的Angular 10应用程序中有一个组件，我们将其命名为A。 在这个组件中，我有routes.ts文件中描述的<router-outlet>和路由。 我需要的是通过点击某个B组件中的按钮来更改A组件中的变量(字段)，即在<router-outlet>中路由。我该怎么做呢？ 例如，我们可以讨论这样的变体。 A.component.html <B [changeFieldOfA]="func"></B> A.component.ts export class A {
foo: string =
浏览 12提问于2020-07-23得票数 0
回答已采纳
错误NG8001：'router-outlet‘不是已知元素: 1。如果'router-outlet’是一个角度组件，请确认它是此模块的一部分。2.如果'router-outlet‘是一个Web组件，则将'CUSTOM_ELEMENTS_SCHEMA’添加到此组件的'@NgModule.schemas‘中以抑制此消息。
4 <router-outlet></router-outlet>
在我的app.component中，这行
<router-outlet></router-outlet>
在我的pac
浏览 1提问于2020-02-24得票数 8
试图重新定义问题，因为我有更多的信息。
我正在使用Angular Material (8) -以及MDBootstrap包。我有两个区域。一个是处理登录/授权()的区域，另一个是“仪表板”区域(登录后要访问)(仪表板)。
下面是使用 AUTH 和MYDASHBOARD -AUTH被解释为primary的代码。我将第二个router-outlet定义命名为mydashboard
app.component.html
<router-outlet></router-outlet>
<router-outlet name="mydashboard
浏览 3提问于2020-02-19得票数 0
回答已采纳
我正在尝试通过<router-outlet></router-outlet>将服务从父组件、对象传递到子组件。我使用这些文档来指导我的，但是当我试图运行这个应用程序时，我没有收到任何错误或输出。
该服务的代码：
import {Injectable} from '@angular/core';
import {Subject} from 'rxjs';
import {MyObject} from '../models/my-object.model';
@Injectable()
export class Object
浏览 3提问于2017-03-26得票数 3
回答已采纳
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回答
在Angular2中不工作的路由
、、、、
我的路由在Angular2中不起作用，为了证明这一点，我把相同的组件作为我的站点的根和/login的目标。组件在http://localhost:3000工作，但在http://localhost:3000/login，我只收到一个通知：“不能得到/login”。
app.component.ts：
import { Component } from 'angular2/core';
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';
impor
浏览 5提问于2016-03-23得票数 2
回答已采纳
2回答
我正在一个Angular应用程序中构建一个布局，如下所示：
<app-navbar></app-navbar>
<div class="router-wrapper">
<router-outlet></router-outlet>
</div>
我的问题是，我在<router-outlet>中加载的组件中有一个侧边栏，这个侧边栏应该放在屏幕上的所有内容之上；但无论我如何使用z索引或绝对位置，它总是在顶部的导航栏后面显示；这真的可以做到吗？
浏览 12提问于2019-07-09得票数 0
回答已采纳
我有一个主要的布局，其中有头部，身体和页脚。在某些页面中，我不想显示页眉，只显示主体和页脚。
我已经通过了，我试图实现它，但是我无法想出如何实现它。
这是我的代码：
app.component.ts
import { Component } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
@Component({
selector: 'main-app',
template: `<router-outlet name=
浏览 3提问于2017-01-08得票数 0
我正在尝试创建一个非常简单的SPA，它有一个顶部工具栏和一些内容。
+-------------------------------------------+
| mat-toolbar |
+-------------------------------------------+
| |
| |
|
浏览 5提问于2021-02-20得票数 0
1回答
你好，我是新来的角，材料和业力，我建立了一个小应用程序和运行测试。我在我的app.componente.ts中添加了所有需要的模块，但是达到了下面的错误。
Failed: Template parse errors:
'router-outlet' is not a known element:
1. If 'router-outlet' is an Angular component, then verify that it is part of this module.
2. If 'router-outlet' is a Web Compo
浏览 2提问于2017-08-02得票数 0
回答已采纳
Angular2 LazyLoading当我单击链接其加载其组件、Html页面、模块但没有在<router-outlet>中显示<router-outlet>页面时
Masterpage
<a [routerLink]="['Customer/Add']">Customer</a><br />
<a [routerLink]="['Employee/Add']">Employee</a><br />
<router-out
浏览 1提问于2017-12-23得票数 0
回答已采纳
我想分开管理和用户导航的角度项目，就像电子商务网站。但是子路由并不适用于仪表板或用户。当我单击仪表板内的报表路由时，它会出现错误。这是我的代码
app/app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DashboardComponent } from './admin/dashboard.component';
import { HomeC
浏览 2提问于2020-02-20得票数 0
我测试了这个片段：
import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
@Component({
selector: 'app-about',
templateUrl: './about.component.html',
styleUrls: ['./about.component.css']
})
export class About
浏览 0提问于2018-04-26得票数 0
回答已采纳
由于这是纯粹的HTML/CSS问题，我没有标记角，因为我把它作为小提琴在HTML中复制。
我有一个带有height:100%和overflow-y: hidden的div，所以div维护视图端口。
但我注意到的问题是，其中的一个div是由ngFor填充的，并且扩展了页面，但是它不允许我设置overflow-y: scroll认为它可以工作。但事实并非如此，所以我有点困惑。
.banner { height: 100px; }
.content { height: calc(100% - 150px); }
.footer { height: 50px; }
<div class=
浏览 5提问于2019-11-06得票数 1
回答已采纳
2回答
当我在功能模块GalleryModuleModule中选择上传的初始组件时，这个组件GalleryComponent
我知道这个错误：
Invalid configuration of route '': Array cannot be specified (所有组件都在GalleryModuleModule中)。告诉我我做错了什么，如何解决这个问题？
app.module:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@
浏览 0提问于2018-10-05得票数 0
回答已采纳
1回答
在一个新的角种子应用程序(ng new)中，应用程序被卡在“加载.”上。一旦我将它添加到app.component.html中：
<router-outlet></router-outlet>
我确实试过注射Router
export class AppComponent {
constructor(router: Router) { }
title = 'app works!';
}
事情变得更奇怪了。只要我有router-outlet标签，它仍然停留在“加载.”上。一旦我删除它(但Router仍然被注入)，我就会得到一个空白屏幕(也就是说，甚
浏览 2提问于2017-06-10得票数 0
回答已采纳
1回答
我在我的角度应用程序中添加了2 router-outlet，当我给出另一个router-outlet的URL时，链接显示了一些错误。
这是我的app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule, RouterOutlet, RouterLink, RouterLinkActive } from '@angular/router';
import { FrontpageComponent } from './Mycompo
浏览 2提问于2019-09-08得票数 2
回答已采纳
1回答
滚动边距-顶部不处理邮件布局
、、、、
在我的角应用程序中，我有一个管理模板页面布局，如下所示：
我设置了.content-wrapper、body和html，如下所示：
html, body {
height: 100%;
overflow-y: hidden;
}
.content-wrapper {
overflow-y: scroll;
height: calc(100vh - 70px);
scroll-margin-top: 100px;
}
这是我的app.component.html中的布局
<app-header></app-header>
<a
浏览 3提问于2021-03-03得票数 0
回答已采纳
有没有一种“正确”的方法将导航栏添加到你的Angular应用程序中？我有一个3组件的应用程序，在那里我希望所有的页面显示在顶部的导航栏。我想这个导航栏包括角度路由器链接，并切换它的外观基于用户登录或未登录。如果我只是将以下代码放入我的app.component模板中，那么页面就会失去它们的角度功能。我不确定为什么会发生这种情况，但我知道为什么这种方法不好。
<div class="nav">
<a [routerLink]="['Login']">Login</a>
</div>
您是否创建
浏览 1提问于2016-03-27得票数 2
我对angular 2 (RC1)路由器有严重的问题。
下面的代码可以工作：
<a [routerLink]="['/anythingEvenNotExistingRoute']"></a>
<router-outlet></router-outlet>
这不是：
//<a [routerLink]="['/anything']"></a> <-- without this line in html template
<router-outlet
浏览 2提问于2016-05-19得票数 4
我有app模块和共享模块。在app-routing模块中，我有：
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { SiteLayoutComponent } from "./shared/layouts/site-layout/site-layout.component";
import { LoginPageComponent } from "./components/lo
浏览 0提问于2021-09-16得票数 0
我为我的angular2应用程序的根组件提供了以下模板：
<main class="main">
<div class="main__container">
<div class="main__left-area">
<router-outlet name="left-zone"></router-outlet>
</div>
<div class="main__right-area">
浏览 2提问于2017-03-01得票数 6
回答已采纳
我使用Angular的appComponent中的高亮显示管道来高亮显示来自另一个组件的router-outlet中显示的搜索文本，但我不知道如何在组件中(而不是在模板中)使用该管道。
我当前在app.component.ts中拥有的内容
import { Component, OnInit } from '@angular/core';
import { HighlightPipe } from './shared/highlight-pipe';
@Component({
selector: 'app-root',
template
浏览 4提问于2019-11-22得票数 1
回答已采纳
3回答
整页导航角4
、、
我刚接触到棱角，并开始掌握路由和组件的窍门。不过，我有一个问题，就是：
如何导航到第二个页面(组件)，只显示该内容，而不只是将组件数据加载到<router-outlet></router-outlet>中。
单击该按钮时，希望整个页面只显示第二个组件数据。我基本上想知道我如何能够在角4的整个页面导航。
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core'
浏览 3提问于2017-11-19得票数 0
我有日期在所有的components.They都是不同的格式显示。我想在一个typescript file.How中控制日期格式，我能做到吗？ app.ts import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `<router-outlet></router-outlet>`
})
export class AppComponent {
Today=Date.now();
} app.html <
浏览 9提问于2019-03-21得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
