小编roo*_*eja的帖子

我在App component.html中有一个像这样的代码.

 <form>
        <input #box1 (blur)="onKey1(box1.value)" type="text" name="username">
        <p>{{box1.value}}</p>
    </form>

在AppComponent.ts中我有这样的代码.

import { Component } from '@angular/core';
import { OnInit } from '@angular/core/src/metadata/lifecycle_hooks';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent{
    type:string;
    constructor() { }
    onKey1(value:string)
    {
        this.type=value;  
    }
}

现在我创建了一个名为MyComponent3的组件.在该组件中,我想从app组件中检索数据.MyComponent3.html的代码如下:

<p>{{type}}</p>

在MyComponent3.ts中,我有以下代码.

import { Component, OnInit, ViewEncapsulation,Input } from '@angular/core';
@Component({
    selector: 'app-my-component3',
    templateUrl: './my-component3.component.html',
    styleUrls: ['./my-component3.component.css'],
    encapsulation: ViewEncapsulation.None
})
export class MyComponent3Component implements OnInit {
    @Input() type;
    ngOnInit() {
    }
}

但是在输出中,值没有从AppComponent传递到My Component3.

我有一个AuthGuard.service.ts的代码如下.

import { Injectable } from '@angular/core';
import { ActivatedRoute, CanActivate } from '@angular/router';
import { userLoginService } from './userLoginService';
export class AuthGuard implements CanActivate {
    constructor(private service: userLoginService) { }
    canActivate() {
        if (this.service.IsloggedIn()) {
            return true;
        } else {
            window.alert(' You are not logged in.Please LogIn ');
            return false;
        }
    }

}

在userLoginService.ts中,我有如下代码

export class userLoginService {
    constructor() {}
    IsloggedIn(): boolean {
        return false;
    }
}

我在我的路线中注入了这个AuthGuard.service.ts,如下所示.我还在NgModule的提供者中提供了这个服务名称.

    const appRoutes: Routes = [
      { path: '', component: HomePageComponent, pathMatch: …

我的 .ts 文件中有如下字符串。

const date = "5/03/2018";

我想转换为日期类型，它是 angular Date 类返回的默认日期类型。

 Tue Apr 03 2018 20:20:12 GMT+0530 (India Standard Time)

现在我必须将此字符串类型日期转换为默认角度日期类型。有帮助吗？我尝试了以下方法。

const date1 = new Date("5/03/2018");

但它不起作用我没有得到所需的格式。这是 stackblitz 链接，任何建议都会有所帮助。 https://stackblitz.com/edit/angular-gdwku3

我是 rxjs 新手。在我的应用程序中，我遇到了一种将用户名和密码值从一个组件传递到另一个组件的情况（以角度方式）。请您帮助我通过行为主题将这些变量从一个组件传递到另一个组件，并提供一个简洁的基本示例。我有一个类存储用户详细信息 UserInformation.ts 如下

export class UserInformation {
    username: string;
    constructor() {
    }
}

我有一个服务如下。用户信息.service.ts

import { Injectable } from '@angular/core';
import { UserInformation } from '../UserInformation';
@Injectable()
export class UserInformationService {
  userData:UserInformation;
  variable:string='ServiceVariable';
  constructor() {
    this.userData = new UserInformation(); 
   }
  getUserData()
  {
    return this.userData;
  }
  setUserData(userData:UserInformation)
  {
    this.userData.username=userData.username;
    console.log(this.userData.officeLocation);
  }
}

在我的 FirstComponent.ts 中，我有以下代码。这个 getVALuesFromForm 方法用于从表单中获取用户名。

getValuesFromForm()
   {
     this.enteredUser.username = this.loginform.get('Username').value;
     console.log(this.enteredUser.username);
     this.service.setUserData(this.enteredUser);     
   }

在我的 secondaryComponent.ts 中，我有以下代码。

import { Component, OnInit , Input , Output  } from '@angular/core'; …

我的 Angular 应用程序中有两个组件（Component1 和 Component2）。我在我的应用程序组件中呈现了这两个组件。现在我想将一个值从 Component1 发送到 Component2。如何发送。有没有最佳实践？？

在 Component1 我有一个这样的代码。组件1.html

<button (click)="passData()">Click Me</button>

组件1.ts

import { Component, OnInit , Output , EventEmitter } from '@angular/core';
@Component({
  selector: 'app-component1',
  templateUrl: './component1.component.html',
  styleUrls: ['./component1.component.css']
})
export class Component1Component implements OnInit {

   Component1Variable:string="Component1VariableSent";
  constructor() { }
  ngOnInit() {
  }
   @Output()
   SendValue=new EventEmitter<string>();
   passData()
   {
        this.SendValue.emit(this.Component1Variable);
   }
}

在 Component2.html 我有

<app-component1 (SendValue)="ValueFromComp1($event)"> </app-component1>
{{ValueFromComponent1}}

在 Component2.ts 我有

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-component2',
  templateUrl: './component2.component.html',
  styleUrls: ['./component2.component.css']
}) …