我制作了一个组件,其中我有一个输入字段和按钮.单击按钮我正在绘制第二个组件.我想将数据从一个组件发送到另一个组件？

我将如何将数据从一个组件发送到另一个组件.我需要发送输入值(输入字段中的用户类型)我需要在下一个组件或下一页显示.单击按钮.如何发送数据？这是我的傻瓜 http://plnkr.co/edit/IINX8Zq8J2LUTIyf4DYD?p=preview

import {Component,View} from 'angular2/core';
import {Router} from 'angular2/router';

@Component({
    templateUrl: 'home/home.html'
})


export class AppComponent {
   toDoModel;
  constructor(private _router:Router) {


  }

  onclck(inputValue){
    alert(inputValue)
    this._router.navigate(['Second']);
  }

}

我有一个组件有一个html和.ts文件.出于某些原因,我必须创建多个页面(HTML)页面.
是否可以为单个类(组件)创建多个(html)页面？
或者是否可以为组件提供动态TemplateUrl？

我的主要动机是提供不同的URL并使用不同的视图(HTML页面)但使用单个类(.ts类即组件)？
我已经看到下面提到的很多问题,但没有找到确切的解决方案 -

• Angular 2中的动态模板URL
• 如何为Angular2 Component提供动态templateUrl？

我想要这样的东西

{ path: '/Login', component: LogIn, name: "Login"},
{ path: '/Login2', component: LogIn, name: "Login" },
{ path: '/Login3', component: LogIn, name: "Login" }

我想用不同的URL和视图加载相同的组件.

如果我返回到相同的路由路径,则会显示错误

"Uncaught(承诺):TypeError:无法读取未定义的属性'isActivated'".

但不是第一次出现.谁能帮我 ？

路由

const mainRoutes: Routes = [
    { path: '', pathMatch: 'full', redirectTo: '/home' },
    {
        path: 'home', loadChildren: './apps/home/home.module#HomeModule', canActivate: [AuthGuard],
        resolve: {
            crisis: NavigarionResolve
        }
    }
    { path: '**', component: PageNotFoundComponent }
];

零件

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { AuthService }            from '../main/service/auth.service';

@Component({
  selector: 'home-app',
  templateUrl: 'apps/home/view/home.component.html',
  providers: [AuthService]
})

export class HomeComponent implements OnInit {
  loaded: boolean = false;
  title = 'Customer Management …

我想在我的Angular 2应用程序中进行路由时禁用更改URL.

我知道skipLocationChange: true必须作为NavigationExtras参数传递给路由器.

我的问题是:

是否可以从模板内部将NavigationExtras传递给routerLink？

我尝试过的:

<h1>
  {{title}}
</h1>

<ul>
    <li><a [routerLink]="['route1', { skipLocationChange: true }]">Route1</a></li>
    <li><a [routerLink]="['route2', { skipLocationChange: true }]">Route2</a></li>
</ul>

<router-outlet></router-outlet>

但它不起作用.

单击链接后,路径将更改为 http://localhost:4200/route2;skipLocationChange=true

我不想this.router.navigate(['route1], {skipLocationChange: true)在我的控制器中使用,因为那时我失去了routerLinkAtive突出显示.

我正在使用一个库,希望我指定一个指令的主体作为template元素的子元素

<template customDirective>
   <custom-element #lookup></custom-element>
</template>

有没有办法访问custom-element#lookup我的组件内部.

例如,

@Component({
  selector: 'app-test',
  template: `
    <template customDirective>
       <custom-element #lookup></custom-element>
    </template>
  `
})
export class TestComponent {
  @ViewChild('lookup') viewChildRef;
  @ContentChild('lookup') contentChildRef;

  constructor() {
  }

  ngAfterContentInit(): void {
     console.log(this.viewChildRef); // <-- undefined
     console.log(this.contentChildRef); // <-- undefined
  }
}

我遇到undefined了两种情况.

我是角度2的新手,我有一个名为Register的组件,在这1个组件中我有5个HTML页面,其中一次点击第一个注册页面,我将进入第二个注册页面,点击第二个注册页面,我将转到第3个注册页面.如何在一个组件中制作5个HTML页面我的意思是有没有办法在每个组件上实现多个模板？如何做路由？主要目的是拥有单独的HTML和SCSS文件和路由逻辑.

截至目前,我正在渲染页面,ngIf这使得我的页面非常冗长.有办法实现这个目标吗？

<!--View 1-->
        <div class="open-card-BG" *ngIf="registerView=='regView1'">
Register Page 1
</div>
            <!--View 2-->
            <div class="open-card-BG" *ngIf="registrationView=='regView2'">
Register Page 2
</div>


    @Component({
      selector: 'register-page',
      templateUrl: './register-page.component.html',
      styleUrls: ['./register-page.component.scss'],
      providers : [RegisterService,Configuration,LocalStorageService]
    })
        ngOnInit() {
        this.registerView= "regView1";
      }

    changeView(view) {

          this.registerView= view;
      }

      previousView(view) {

          this.registerView= view;
      }

我需要为我的地图标记气球体提供一个可靠的HTML字符串.
我想让baloon成为一个Angular组件,并使用绑定和内置指令(*ngFor, *ngIf等).所以我正在寻找一种方法来评估组件模板中的所有绑定并将结果编译为字符串...
如何实现这一点或者如果这种方法是非角度的 - 可以推荐哪种模式？

// Component

import {Component} from '@angular2/core';
import {AnyThing} from './somewhere/in/my/app/anything.model.ts';

@Component({
  selector: 'my-baloon-window',
  template: `<p>This is a baloon for {{ any.name }}</p>`
})
export class MyBaloonWindowComponent {
    constructor(public something: AnyThing) {}
}


// Implementation

import {AnyThing} from './somewhere/in/my/app/anything.model.ts';
import {MyBaloonWindowComponent} from './path/to/baloon-window.component';

/* { ...some code here... } */

private createBaloonWindow(thing: AnyThing): google.maps.InfoWindow {
    return new ymap.map.BaloonWindow({
      /* I want something like this */
      content: new MyBaloonWindowComponent(thing).toString() 
      /* ^ this is what …

我使用了ngx-bootstrap模态.但是当我使用mat-select内部时,我遇到了问题.在模态后面的mat-select选项显示.我已经这些解决方案在这里的解决方案,并 同时这一个

这是我的代码

<ng-template style="border: 0px ;z-index: 100" #editTemplate>
  <mat-form-field>
                <mat-select multiple placeholder="Multiple Cities" [(ngModel)]="currentCity" name="Paris" ariaLabel="cities[0]">
                  <mat-option *ngFor="let city of cities" [value]="city.value">
                    {{ city.viewValue }}
                  </mat-option>
                </mat-select>
              </mat-form-field>
<ng-template>

我有一个Angular 2组件,用于*ngFor渲染嵌套的数字数组.

@Component({
  selector: 'app',
  template: `
    <div *ngFor="let row in data">
      <div *ngFor="let curve in row">
        <chart [data]="curve">
      </div>
    </div>
  `,
  directives: [Chart],
})
export default class App {
  data: number[][][];
}

当我改变时data,<chart>即使新数组具有相同的尺寸,Angular 也会替换元素.我只想更新图表的属性但保留元素(以便我可以设置数据变化的动画).

可以理解,Angular会替换元素,因为新数组是一个新的对象引用.但我怎么能绕过这个呢？

我正在开发基于版本桌面/移动版的略有不同功能的网站.

我尝试通过@View应用它,但看起来这个装饰器现在已被弃用.请告诉我最佳实践,如何在Angular 2中实现此功能.