标签: angular2-routing
如何在数组上按项目后清除输入字段？
我做了一个角度2的简单例子.我在数组中添加了项目.当用户键入任何内容并按下按钮时,它将被添加到数组中并显示在列表中.
我面临两个问题
- 1)如何在插入数组后清除输入字段？
2)角度2如何工作？如在文档Angular 2中删除监视.当项目添加到数组.how模板显示更新列表.how？
是在看列表模型吗？
这是我的plunker代码
<ion-navbar *navbar>
<ion-title>
Ionic 2
</ion-title>
</ion-navbar>
<ion-content class="has-header">
<ion-list style="border:2px solid grey;height:500px">
<ion-item *ngFor="#item of Todo">
{{item.name}}
</ion-item>
</ion-list>
<label class="item item-input">
<span class="input-label" >Add Todo</span>
<input type="text" #todo placeholder="Add todo" >
</label>
</ion-content>
<ion-footer-bar (click)="addItem(todo.value)">
<h1 class="title" style='color:red'>Add Todo!</h1>
</ion-footer-bar>
推荐指数
解决办法
查看次数
TypeError:无法在NativeScript中读取null的属性'_router'
我正在使用NativeScript + AngularJS2 + TypeScript处理Android应用程序.按照他们的文档 - http://docs.nativescript.org/angular/tutorial/ng-chapter-0.
在成功登录后,用户需要重定向到List页面时陷入困境.现在关注他们的路由部分 - http://docs.nativescript.org/angular/tutorial/ng-chapter-3#35-routing
根据他们的文档做了一切.这是我的代码 -
app.component.ts
import {ListPage} from "./pages/list/list.component";
import {Component} from "@angular/core";
import {RouteConfig} from "@angular/router-deprecated";
import {NS_ROUTER_DIRECTIVES, NS_ROUTER_PROVIDERS} from "nativescript-angular/router";
import {LoginPage} from "./pages/login/login.component";
@Component({
selector: "main",
directives: [NS_ROUTER_DIRECTIVES],
providers: [NS_ROUTER_PROVIDERS],
template: "<page-router-outlet></page-router-outlet>"
})
@RouteConfig([
{ path: "/Login", component: LoginPage, name: "Login", useAsDefault: true },
{ path: "/List", component: ListPage, name: "List" }
])
export class AppComponent {}
user.service.ts
import {Injectable} from "@angular/core";
import {User} from "./user"; …推荐指数
解决办法
查看次数
angular2 - 检查用户登录
我开始学习有关角度2的所有内容,目前有问题.我在我的应用程序中定义了这些路由:
const appRoutes: Routes = [
{path: 'start',
component: StartComponent,
children:[{path: '' },
{
path:'nested', component:NestedTestComponent
}
]},
{path: '', component:LoginFormComponent}
];
在用户输入凭证(并且它们是正确的)之后,存在显示登录表单的"基本"路径,用户将被定向到"开始"并且这被作为嵌套路由"嵌套".这非常有效.但是如果用户没有登录,我想以某种方式限制用户访问"开始"和"嵌套".因为目前只需将其作为URL输入即可.
我的index.html看起来像这样:
<body>
<app-root>Loading...</app-root>
</body>
app.component:
@Component({
selector: "app-root",
template: `
<router-outlet></router-outlet>
`,
styleUrls: ['./app.component.css']
})
start.component
<nav>
<div class="nav-wrapper">
<a href="#" class="brand-logo center"></a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a (click)="logout()">Logout</a></li>
</ul>
</div>
</nav>
<router-outlet></router-outlet>
因为一切都以某种方式嵌套在我的方法中是检查app.component,如果用户使用以下方式登录:
export class AppComponent {
constructor(af:AngularFire, router:Router){
if(af.auth.getAuth() == null){
//redirect to start
console.log('redirect to login');
router.navigate(['']);
}else{
console.log('not redirect to login');
}
} …推荐指数
解决办法
查看次数
angular2路由器在订阅方法中变为未定义
正如标题所解释的那样,当router对象在subscribe成员内部被调用时,该对象变得不确定.
我来告诉你一些代码:
export class AuthComponent implements OnInit {
password = '';
email = '';
constructor(
private _router: Router,
private authService: AuthService
) { }
sendLogin(): void {
this.authService.login(this.email, this.password)
.subscribe(function(token){
console.log("Success Response" + token)
this.token = token
// TOKEN Here is good
// now I want to change my page, but
// _router -> undefined
this._router.navigate(['/dashboard']);
},
error => console.log(error));
}
sendLogin()提交表单时调用该方法.表格中的每个变量都很好.
这个过程subscribe完美,但后来
this._router.navigate(['/dashboard']);
给了我:
EXCEPTION:无法读取undefined的属性'navigate'
有任何想法吗 ？
angular2-routing angular2-services angular2-observables angular
推荐指数
解决办法
查看次数
Angular 2：超出最大调用堆栈大小（延迟加载）
我一直在实施延迟加载，直到某个时候一切正常，但突然间我遇到了错误。
关于可能的可能性的任何想法
RangeError: Maximum call stack size exceeded
at CatchSubscriber.OuterSubscriber [as constructor] (OuterSubscriber.ts:9)
at new CatchSubscriber (catch.ts:48)
at CatchOperator.call (catch.ts:35)
at Observable.subscribe (Observable.ts:93)
at Object.subscribeToResult (subscribeToResult.ts:32)
at MergeAllSubscriber._next (mergeAll.ts:86)
at MergeAllSubscriber.Subscriber.next (Subscriber.ts:95)
at MapSubscriber._next (map.ts:84)
at MapSubscriber.Subscriber.next (Subscriber.ts:95)
at ArrayObservable._subscribe (ArrayObservable.ts:124)
推荐指数
解决办法
查看次数
如何在 Angular 2 RouterModule 中将 Bootstrap 导航栏设置为“活动”类？
我有一个带有一些标签的侧边导航栏
<div class="side-wrap-div">
<div class="list-group sidebar-nav">
<li class="list-group-item borderBottomMenu active" >
<a href="#/{{ DocumentURL }}">Document</a>
<span class="marker-logo"></span>
<span class="logo document-logo-click" ></span>
</li>
</div>
<div class="list-group bottom-fixed">
<div id="collapse3" *ngIf="showContact">
<a href="#/contact/{{ currentTaskId }}" class="panel-collapse list-group-item collapse">
<span class="logo contact-logo" ></span>Contact
</a>
</div>
<div>
如何将选定的导航栏设置为活动状态？我正在使用 RouterModule（不是 [routerLink]）并在 app.routing.ts 中声明了我的路由。
推荐指数
解决办法
查看次数
NullInjectorError: No provider for Router! error angular 2
ERROR Error: StaticInjectorError(AppModule)[HeaderComponent -> Router]:
StaticInjectorError(Platform: core)[HeaderComponent -> Router]:
NullInjectorError: No provider for Router!
at _NullInjector.get (core.js:994)
at resolveToken (core.js:1292)
at tryResolveToken (core.js:1234)
at StaticInjector.get (core.js:1102)
at resolveToken (core.js:1292)
at tryResolveToken (core.js:1234)
at StaticInjector.get (core.js:1102)
at resolveNgModuleDep (core.js:10836)
at NgModuleRef_.get (core.js:12069)
at resolveDep (core.js:12559)
推荐指数
解决办法
查看次数
如何在 Angular2 中使用导航进行路由时显示加载屏幕？
我已经尝试过这个解决方案，但无法使其正常工作。我对 Angular2 完全陌生（不了解 AngularJS）。好吧，加载屏幕没有显示，我想我需要添加一些超时，以便它有一些时间显示，但我不知道在哪里以及如何显示。
应用程序组件.ts
import {Component} from '@angular/core';
import {
Router,
// import as RouterEvent to avoid confusion with the DOM Event
Event as RouterEvent,
NavigationStart,
NavigationEnd,
NavigationCancel,
NavigationError
} from '@angular/router';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./loadingCSS.css']
})
export class AppComponent {
// Sets initial value to true to show loading spinner on first load
loading = true;
constructor(private router: Router) {
router.events.subscribe((event: RouterEvent) => {
this.navigationInterceptor(event);
});
}
// Shows and hides the loading …推荐指数
解决办法
查看次数
如何在主组件的内容区域中显示组件而不是 Angular 5 中的单独页面
我是 Angular 5 的新手，在这里我面临着组件路由的问题。
我想要做的是，当用户首先打开应用程序时，它应该显示一个登录屏幕（登录屏幕具有浏览器窗口的全高和全宽）。一旦用户成功验证，用户就会进入Home 组件。
这里 Home 组件有 Toolbar 和 Side menu bar ，如果用户从侧边菜单栏中选择了任何一个，我想在 home 组件的内容区域中显示相关（组件）数据。
截至目前一切正常，我的意思是当用户打开应用程序登录屏幕时首先显示并成功验证主页显示给用户。
当用户从侧边菜单栏中选择任何菜单时会出现问题，该组件未显示在 Home 组件的内容区域中，它作为单独的组件打开并全屏显示。
home.component.ts
<mat-sidenav-container class="sidenav-container">
<mat-sidenav #drawer class="sidenav" fixedInViewport="true" [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
[mode]="(isHandset$ | async) ? 'over' : 'side'" [opened]="!(isHandset$ | async)" style="background:black">
<mat-toolbar class="menuBar">Menus</mat-toolbar>
<mat-nav-list>
<a class="menuTextColor" mat-list-item routerLink="/settings">Link 1</a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<mat-toolbar class="toolbar">
<button class="menuTextColor" type="button" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()"
*ngIf="isHandset$ | async">
<mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
</button>
<span …推荐指数
解决办法
查看次数
新选项卡中的 Angular 8 路由组件
我有一个 Angular 组件调用报告，我想通过单击主页上的链接按钮在新选项卡中打开它。目前它在同一页面中可以正常打开，但必须按浏览器上的后退箭头才能导航回来。target='_blank' 在带有 URL 的 window.open 情况下有效，但在 Component 情况下无法弄清楚。请告知是否有办法在 Angular 8 的新选项卡中打开它
html
<div class="col-md-6">
<button class="m-1 btn btn-link" (click)="CallReports()" type="button">
Call Flows
</button>
</div>
成分
public CallReports() {
this._router.navigate(['callreports']);
}
推荐指数
解决办法
查看次数
如何链接Angular中的内部文件？
我正在尝试从导航栏链接我的登录页面.这就是我对navbar的看法:
<div class="navbar-container">
<ul id="slide-out" class="side-nav center-align">
<li>
<div class="user-view center-align">
<a><i class="medium material-icons close-button">close</i></a>
</div>
<li><a routerLink="../login">Login</a></li>
</ul>
<a href="#" data-activates="slide-out" class="button-collapse"><i class="small material-icons {{updateMe()}}">filter_list</i></a>
</div>
这是我的文件结构:
但是,它只是没有链接到组件.我得到的错误是:
core.js:1542 ERROR错误:未捕获(在承诺中):错误:无法匹配任何路由.网址细分:'登录'
我使用相对路径错了吗？我怎样才能解决这个问题？谢谢!
推荐指数
解决办法
查看次数
标签 统计
angular2-routing ×11
angular ×10
typescript ×2
angular5 ×1
angularjs ×1
filepath ×1
html ×1
ionic2 ×1
javascript ×1
lazy-loading ×1
nativescript ×1
nav ×1
routerlink ×1