有谁知道为什么我的Angular2应用程序首次加载页面时会出现此错误？当我浏览我的应用程序时，它会清除并且不会回来。如果我按CTRL + F5，它往往会回来（尽管不是每次都！）。此应用的路由如下所示：
AppComponent.ts
LoginComponent.ts
DashboardComponent(Parent route with its own child routes)
MainDashboardComponent
EmployeesComponent
顶级index.html文件中包含该<my-app></my-app>标签，该标签会定期报告该错误，因此我感到困惑，因为它无法在页面上看到该标签！
错误详情：
例外：选择器“ my-app”与任何元素都不匹配。BrowserDomAdapter.logError@ angular2.dev.js：22823BrowserDomAdapter.logGroup @ angular2.dev.js：22834ExceptionHandler.call @ angular2.dev.js：1163（匿名函数）@ angular2 .dev.js：12481NgZone._notifyOnError @ angular2.dev.js：13405collection_1.StringMapWrapper.merge.onError @ angular2.dev.js：13309run @ angular2-polyfills.js：141（匿名函数）@ angular2.dev.js：13328zoneBoundFn @ angular2-polyfills.js：111lib $ es6 $ promise $$ internal $$ tryCatch @ angular2-polyfills.js：1511lib $ es6 $ promise $$ internal $$ invokeCallback @ angular2-polyfills.js：1523lib $ es6 $ promise $$内部$$发布@ angular2-polyfills.js：1494（匿名函数）@ angular2-polyfills.js：243microtask @ angular2.dev.js：13360run @ angular2-polyfills.js：138（匿名函数）@ angular2.dev.js ：13328zoneBoundFn @ angular2-polyfills.js：111lib $ es6 $ promise $ asap $$ flush @ …
我正在尝试从组件生成html内容很多时间,但是这个组件是从AppCompoment生成的.所以我想用routerLink从组件生成内容.我将在下面展示这个例子.知道我使用DeborahK从pluralsight.com教程获得的这个解决方案,我的源代码与此https://github.com/DeborahK/Angular2-GettingStarted/blob/master/APM - Final 相同.好的,让我们解释一下我的代码.
我有主index.html
<html>
<head>
<base href="/">
<title></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<!--<script src="node_modules/es6-shim/es6-shim.js"></script>-->
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<!-- if NOT included, does not work in IE-->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<!--Http module-->
<script src="node_modules/angular2/bundles/http.dev.js"></script>
<!-- Routing -->
<script src="node_modules/angular2/bundles/router.dev.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support …我正在使用Angular 2和Router 3.0.0-aplha.8.
我正在尝试使用CanActivate函数来检查用户是否经过身份验证.我有一个实现CanActivate的AuthGuard,现在我只返回true.
route.ts
import { Injectable } from '@angular/core'
import { provideRouter, RouterConfig, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router} from '@angular/router';
import { AuthGuard } from './auth-guard'
import { SecurityComponent } from './security/security.component';
import { AdminDashboardComponent } from './admin/admin.dashboard.component';
export const mainRoutes: RouterConfig = [
{ path: '', component: SecurityComponent, },
{ path: 'admin', component: AdminDashboardComponent, terminal: true, canActivate: [AuthGuard] }]
export const MAIN_ROUTER_PROVIDER = provideRouter(mainRoutes);
AUTH-guard.ts
import { Injectable } from '@angular/core';
import {
CanActivate,
Router,
ActivatedRouteSnapshot,
RouterStateSnapshot
} …如何在角度为2的路由器插座内从一个组件路由到另一个组件？
login.component.html
... login form ...
<a (click)="gotoSignup()">gotosignup</a>
<a routerlink="signup">singup</a>
<a routerlink="/signup">/singup</a>
<a routerlink="/signup/">singup</a>
<a routerlink="['signup']">[singup]</a>
<a routerlink="[/signup]">[/singup]</a>
login.component.ts
import { Component, OnInit } from '@angular/core';
import { Http, RequestOptions, Headers} from '@angular/http';
import { Router, ActivatedRoute } from '@angular/router';
export class LoginComponent implements OnInit {
constructor(public router: Router) {}
gotoSignup() {
this.router.navigate(["signup"]);
}
}
在上面的示例中,gotosignup正在使用路由器Link无法正常工作.
试图使用<a [routerLink] ...ist not working eiter.它会导致以下错误:
Unhandled Promise rejection: Template parse errors:
Can't bind to 'routerlink' since it isn't a known property …我正在为两个json服务（DB）使用In memory Web API
1）
import {InMemoryDbService} from 'angular-in-memory-web-api';
export class InMemoryDataService implements InMemoryDbService {
createDb() {
let heroes = [
{id: 11, name: 'Mr. Nice'},
{id: 12, name: 'Narco'},
{id: 13, name: 'Bombasto'},
{id: 14, name: 'Celeritas'},
{id: 15, name: 'Magneta'},
{id: 16, name: 'RubberMan'},
{id: 17, name: 'Dynama'},
{id: 18, name: 'Dr IQ'},
{id: 19, name: 'Magma'},
{id: 20, name: 'Tornado'}
];
return {heroes};
}
}
2）
import {InMemoryDbService} from 'angular-in-memory-web-api';
import {Address} from "cluster";
export class StudentData …angular2-template angular2-routing angular2-services angular
在Angular2中传递实例方法.
login()在以下代码中从模板调用时,我收到此错误:
Failure TypeError: Cannot read property 'router' of null
at AuthLoginComponent.success (auth-login.component.ts:30)
at ZoneDelegate.invoke (zone.js:242)
at Object.onInvoke (core.umd.js:4391)
at ZoneDelegate.invoke (zone.js:241)
at Zone.run (zone.js:113)
at zone.js:520
at ZoneDelegate.invokeTask (zone.js:275)
at Object.onInvokeTask (core.umd.js:4382)
at ZoneDelegate.invokeTask (zone.js:274)
at Zone.runTask (zone.js:151)
at drainMicroTaskQueue (zone.js:418)
at XMLHttpRequest.ZoneTask.invoke (zone.js:349)
在以下代码中:
@Component({
moduleId: module.id,
selector: "app-auth-login",
templateUrl: "/app/components/auth/login/auth-login.component.html"
})
export class AuthLoginComponent implements OnInit {
username : "";
password : "";
constructor(
private authLoginService: AuthLoginService,
private router: Router
) {}
ngOnInit(): void {
} …我无法为路由工作制作标签(来自angular material 2 docs):
组件:
export class AppComponent {
navLinks: [
'/groups',
'/objects'
]
}
HTML:
<nav md-tab-nav-bar>
<a md-tab-link
*ngFor="let link of navLinks"
[routerLink]="link"
routerLinkActive #rla="routerLinkActive"
[active]="rla.isActive">
{{tabLink.label}}
</a>
</nav>
<router-outlet></router-outlet>
日志中没有错误可能是显而易见的,但仍然......
我创建了一个Twitter小部件，并尝试将其放入Angular 2项目中，但JS文件不起作用。
如果我使用JS（在这里）插入它，则可以使用，但是当我切换到另一个选项卡并返回（我安装了Angular Routing）时，它消失了，并且显示了A标记中的内容（因此，“ Tweets by ...”）。
HTML代码（在home组件中）：
<md-card-content>
<a class="twitter-timeline" data-lang="en" data-height="350" data-theme="light" data-chrome="noborders nofooter noheader noscrollbar transparent" href="https://twitter.com/profile">Tweets by profile</a>
</md-card-content>
home.component.ts中的脚本，该代码由@ Arg0n提供（请看答案部分）：
import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
constructor(private _router : Router) { }
public ngOnInit() {
this._router.events.subscribe(val => {
if (val instanceof NavigationEnd) {
(<any>window).twttr = (function (d, s, id) {
let …我正在做一个有角度的项目，我已经实现了诸如侧边导航这样的有角度的材质组件。side-nav具有ul li元素，其中的链接是嵌套的，而路由器链接不是href。我的问题是，当我选择一个链接转到另一个视图时，我想调用side nav来切换和关闭。因为它总是打开
我有一个服务,我用来跟踪我的模型的状态.我有多个组件,我想访问此服务变量属性.当第一个组件在init上加载时,我设置了模型,但是当我尝试在路由更改后从我的第二个组件访问此模型时,该变量现在是未定义的.以下是我正在谈论的一个例子.
组件1
constructor(private service: Service, private route)
ngOninit(){
this.service.setModel();
console.log(this.service.getModel()); <-- works fine
}
componentButton1Click(){
route.navigateByUrl(component2route) <--works fine
}
第2部分
constructor(private service: Service)
ngOninit(){
console.log(this.service.index); <-- undefined
}
服务
private index: number;
constructor(private http: Http)
getModel(){
return this.index; <-- works fine
}
setModel(){
this.index = this.http.get('somejsonfile.json').index;
}
angular2-routing ×10
angular ×9
typescript ×2
angularjs ×1
html ×1
javascript ×1
router ×1
service ×1