คำถามติดแท็ก angular

ฉันมีAuthGuard (ใช้สำหรับการกำหนดเส้นทาง) ที่ดำเนินการCanActivate canActivate() { return this.loginService.isLoggedIn(); } ปัญหาของฉันคือว่า CanActivate ผลขึ้นอยู่กับ http-ได้รับผล - The LoginServiceส่งกลับสังเกต isLoggedIn():Observable<boolean> { return this.http.get(ApiResources.LOGON).map(response => response.ok); } ฉันจะนำสิ่งเหล่านี้มารวมกัน - ทำให้ CanActivate ขึ้นอยู่กับสถานะแบ็กเอนด์ได้อย่างไร # # # # # # แก้ไข: โปรดทราบว่าคำถามนี้มาจากปี 2559 - มีการใช้เชิงมุม / เราเตอร์ในช่วงแรก ๆ # # # # # #

94 angular  angular2-routing  angular2-http 

let httpParams = new HttpParams().set('aaa', '111'); httpParams.set('bbb', '222'); ทำไมถึงใช้ไม่ได้? ตั้งค่าเฉพาะ 'aaa' และไม่ใช่ 'bbb' นอกจากนี้ฉันมีวัตถุ {aaa: 111, bbb: 222} ฉันจะตั้งค่าทั้งหมดโดยไม่วนซ้ำได้อย่างไร อัปเดต (ดูเหมือนจะใช้งานได้ แต่จะหลีกเลี่ยงการวนซ้ำได้อย่างไร) let httpParams = new HttpParams(); Object.keys(data).forEach(function (key) { httpParams = httpParams.append(key, data[key]); });

94 angular  angular-http 

ฉันกำลังพยายามจัดรูปแบบองค์ประกอบที่วางโดยเต้าเสียบเราเตอร์ในเชิงมุมและต้องการให้แน่ใจว่าองค์ประกอบที่สร้างขึ้นมีความกว้าง 100% จากคำตอบส่วนใหญ่ฉันเห็นว่าฉันควรใช้::ng-deepตัวเลือก แต่จากเอกสารของ Angular มันกำลังถูกเลิกใช้ มีทางเลือกให้::ng-deepหรือไม่?

94 html  css  angular 

ดังนั้นฉันกำลังทำงานกับ angular4 ในงานฝึกหัดของฉันและนี่เป็นเรื่องใหม่สำหรับฉัน โชคดีเพื่อที่จะได้รับองค์ประกอบ html และค่าที่ฉันใช้ <HTMLInputElement> document.getElementByIdหรือ <HTMLSelectElement> document.getElementById ฉันสงสัยว่ามีการแทนที่สิ่งนี้ในเชิงมุมหรือไม่

94 angular  typescript 

ปัญหาของฉันค่อนข้างคลาสสิก ฉันมีส่วนส่วนตัวของแอปพลิเคชันซึ่งอยู่เบื้องหลังไฟล์login form. เมื่อการเข้าสู่ระบบสำเร็จระบบจะไปยังเส้นทางลูกสำหรับแอปพลิเคชันผู้ดูแลระบบ ปัญหาของฉันคือฉันไม่สามารถใช้งานได้global navigation menuเนื่องจากเราเตอร์พยายามกำหนดเส้นทางในฉันAdminComponentแทนที่จะเป็นAppCompomentไฟล์. ดังนั้นการนำทางของฉันเสีย ปัญหาอีกประการหนึ่งคือหากมีผู้ต้องการเข้าถึง URL โดยตรงฉันต้องการเปลี่ยนเส้นทางไปยังเส้นทาง "เข้าสู่ระบบ" หลัก แต่ฉันไม่สามารถทำให้มันทำงานได้ สำหรับฉันแล้วดูเหมือนว่าสองประเด็นนี้จะคล้ายกัน มีความคิดว่าจะทำได้อย่างไร?

94 angular  angular-routing  angular-router 

ด้วยเหตุผลบางประการฉันต้องเรียกใช้แอปในโหมดการผลิต ความแตกต่างระหว่างโหมดเหล่านี้คืออะไร?

93 angular  development-environment  production-environment 

ฉันกำลังทดสอบหน่วยส่วนประกอบที่ใช้ในการแก้ไขวัตถุ อ็อบเจ็กต์มีเอกลักษณ์idที่ใช้เพื่อดึงอ็อบเจ็กต์เฉพาะจากอาร์เรย์ของอ็อบเจ็กต์ที่โฮสต์ในเซอร์วิส เฉพาะidถูกจัดหาผ่านพารามิเตอร์ที่ส่งผ่านทางเส้นทางโดยเฉพาะผ่านActivatedRouteคลาส ตัวสร้างมีดังนี้: constructor(private _router:Router, private _curRoute:ActivatedRoute, private _session:Session) { } ngOnInit() { this._curRoute.params.subscribe(params => { this.userId = params['id']; this.userObj = this._session.allUsers.filter(user => user.id.toString() === this.userId.toString())[0]; ฉันต้องการเรียกใช้การทดสอบหน่วยพื้นฐานในส่วนประกอบนี้ อย่างไรก็ตามฉันไม่แน่ใจว่าฉันจะฉีดidพารามิเตอร์ได้อย่างไรและส่วนประกอบต้องการพารามิเตอร์นี้ โดยวิธีการ: ฉันมีล้อเลียนสำหรับSessionบริการอยู่แล้วดังนั้นจึงไม่ต้องกังวลที่นั่น

93 unit-testing  angular  angular2-routing  angular2-testing 

ฉันต้องการโยนข้อผิดพลาดจากตัวดำเนินการแผนที่ที่สังเกตได้ตามเงื่อนไข ตัวอย่างเช่นหากไม่ได้รับข้อมูล API ที่ถูกต้อง โปรดดูรหัสต่อไปนี้: private userAuthenticate( email: string, password: string ) { return this.httpPost(`${this.baseApiUrl}/auth?format=json&provider=login`, {userName: email, password: password}) .map( res => { if ( res.bearerToken ) { return this.saveJwt(res.bearerToken); } else { // THIS DOESN'T THROW ERROR -------------------- return Observable.throw('Valid token not returned'); } }) .catch( err => Observable.throw(this.logError(err) …

93 angular  typescript  rxjs 

ฉันได้ติดตั้งวัสดุสำหรับเชิงมุมแล้ว ฉันนำเข้าในโมดูลแอป MatIconModule (with import { MatIconModule } from '@angular/material/icon';) ฉันได้เพิ่มไว้ภายใต้การนำเข้า ngmodule ของฉันด้วย: @NgModule({ imports: [ //... MatIconModule, //... ฉันนำเข้าสไตล์ชีททั้งหมดแล้ว และฉันยังนำเข้าในส่วนประกอบแอปของฉันซึ่งจริง ๆ แล้ว (พยายาม) ใช้ (โดยมีimport {MatIconModule} from '@angular/material/icon';บรรทัดอื่นอยู่ตอนต้น) แต่ไอคอนวัสดุยังไม่ปรากฏ ตัวอย่างเช่นในบรรทัดนี้: <button mat-icon-button (click)="snav.toggle()"><mat-icon>menu</mat-icon></button> ฉันคาดหวังสิ่งนี้: แต่ฉันได้รับสิ่งนี้: มีข้อเสนอแนะหรือไม่?

93 angular  angular-material  angular-material2 

ฉันจะสร้างส่วนประกอบที่กำหนดเองซึ่งจะทำงานเหมือนกับ<input>แท็กเนทีฟได้อย่างไร ฉันต้องการให้คอนโทรลฟอร์มที่กำหนดเองของฉันสามารถรองรับ ngControl, ngForm, [(ngModel)] ตามที่ฉันเข้าใจฉันต้องใช้อินเทอร์เฟซบางอย่างเพื่อให้การควบคุมฟอร์มของฉันเองทำงานเหมือนกับเนทีฟ นอกจากนี้ดูเหมือนว่าคำสั่ง ngForm ผูกไว้สำหรับ<input>แท็กเท่านั้นใช่ไหม ฉันจะจัดการกับสิ่งนั้นได้อย่างไร? ให้ฉันอธิบายว่าทำไมฉันถึงต้องการสิ่งนี้เลย ฉันต้องการรวมองค์ประกอบอินพุตหลายรายการเพื่อให้สามารถทำงานร่วมกันเป็นอินพุตเดียวได้ มีวิธีอื่นในการจัดการกับสิ่งนั้นหรือไม่? ขออีกครั้ง: ฉันต้องการให้การควบคุมนี้เหมือนกับเนทีฟ การตรวจสอบความถูกต้อง ngForm การผูกแบบสองทาง ngModel และอื่น ๆ ps: ฉันใช้ typescript

93 typescript  angular 

ฉันพยายามทำความเข้าใจวิธีใช้ Observables ใน Angular 2 ฉันมีบริการนี้: import {Injectable, EventEmitter, ViewChild} from '@angular/core'; import {Observable} from "rxjs/Observable"; import {Subject} from "rxjs/Subject"; import {BehaviorSubject} from "rxjs/Rx"; import {Availabilities} from './availabilities-interface' @Injectable() export class AppointmentChoiceStore { public _appointmentChoices: BehaviorSubject<Availabilities> = new BehaviorSubject<Availabilities>({"availabilities": [''], "length": 0}) constructor() {} getAppointments() { return this.asObservable(this._appointmentChoices) } asObservable(subject: …

93 typescript  angular  rxjs  observable 

สมมติว่าฉันมีส่วนประกอบ: @Component({ selector: 'MyContainer', template: ` <div class="container"> <!-- some html skipped --> <ng-content></ng-content> <span *ngIf="????">Display this if ng-content is empty!</span> <!-- some html skipped --> </div>` }) export class MyContainer { } ตอนนี้ฉันต้องการแสดงเนื้อหาเริ่มต้นบางส่วนหาก<ng-content>สำหรับส่วนประกอบนี้ว่างเปล่า มีวิธีง่ายๆในการดำเนินการนี้โดยไม่ต้องเข้าถึง DOM โดยตรงหรือไม่?

93 javascript  angular 

คำถาม สำหรับวัตถุประสงค์ในการทดสอบผมสร้างObservableวัตถุที่แทนที่สังเกตได้ว่าจะได้รับการส่งกลับโดยการโทร http Httpเกิดขึ้นจริงกับ สิ่งที่สังเกตได้ของฉันถูกสร้างขึ้นด้วยรหัสต่อไปนี้: fakeObservable = Observable.create(obs => { obs.next([1, 2, 3]); obs.complete(); }); สิ่งนี้คือสิ่งที่สังเกตได้นี้จะเปล่งออกมาทันที มีวิธีเพิ่มการหน่วงเวลาแบบกำหนดเองให้กับการปล่อยหรือไม่? ติดตาม ฉันลองสิ่งนี้: fakeObservable = Observable.create(obs => { setTimeout(() => { obs.next([1, 2, 3]); obs.complete(); }, 100); }); แต่ดูเหมือนจะไม่ได้ผล

93 angular  typescript  observable 

ฉันใช้ onchange เพื่อบันทึกค่าช่วงอินพุตของฉันลงใน firebase แต่ฉันมีข้อผิดพลาดที่บอกว่าไม่ได้กำหนดฟังก์ชันของฉัน นี่คือหน้าที่ของฉัน saverange(){ this.Platform.ready().then(() => { this.rootRef.child("users").child(this.UserID).child('range').set(this.range) }) } นี่คือ html ของฉัน <ion-item> <ion-row> <ion-col>Rayon <span favorite><strong> {{range}} km</strong></span></ion-col> <ion-col><input type="range" name="points" min="0" max="40" [(ngModel)]="range" onchange="saverange()"></ion-col> </ion-row> </ion-item> สิ่งที่เทียบเท่ากับ onchange ในเชิงมุมถ้ามีอยู่ ขอขอบคุณ

93 angular 

ดังนั้นฉันจึงมีรูปแบบที่ซับซ้อนสำหรับสร้างเอนทิตีและฉันต้องการใช้เพื่อแก้ไขเช่นกันฉันใช้ API รูปแบบเชิงมุมใหม่ ฉันจัดโครงสร้างแบบฟอร์มให้ตรงกับข้อมูลที่ฉันดึงมาจากฐานข้อมูลดังนั้นฉันจึงต้องการกำหนดค่าของแบบฟอร์มทั้งหมดให้กับข้อมูลที่ดึงมาที่นี่เป็นตัวอย่างของสิ่งที่ฉันต้องการทำ: this.form = builder.group({ b : [ "", Validators.required ], c : [ "", Validators.required ], d : [ "" ], e : [ [] ], f : [ "" ] }); this.form.value({b:"data",c:"data",d:"data",e:["data1","data2"],f:data}); PS: NgModel ใช้ไม่ได้กับ API รูปแบบใหม่และฉันไม่รังเกียจที่จะใช้การผูกข้อมูลทางเดียวในเทมเพลตเช่นเดียวกับใน <input formControlName="d" value="[data.d]" /> ที่ใช้งานได้ แต่จะเป็นความเจ็บปวดในกรณีของอาร์เรย์

93 angular  angular2-forms