ส่วนประกอบแอปอัปเดตเชิงมุม 2 จากส่วนประกอบเต้าเสียบเราเตอร์

ฉันใช้ เชิงมุม 2 rc1 และเราเตอร์ใหม่ @ เชิงมุม/เราเตอร์

ในองค์ประกอบของแอป ฉันมีส่วนนำทางและร้านเราเตอร์

<nav>   
    <a *ngIf="auth?.userName == null" [routerLink]="['/login']">Login</a>
    <a *ngIf="auth?.userName != null" (click)="logout()">Logout</a>
    {{auth?.userName}}
</nav> 
<router-outlet></router-outlet>

ฉันแทรก LoginService ลงในองค์ประกอบของแอปและสมัครรับกิจกรรมใน ngOnInit

ngOnInit() {
    this.loginService.loginSuccess.subscribe(this.loginSuccess);

} 
ngOnDestroy() {
    this.loginService.loginSuccess.unsubscribe();
}
private loginSuccess(res: IAuthResponse) {
    this.auth = res;
}

เมื่อฉันนำทางไปยังหน้าเส้นทาง '/ เข้าสู่ระบบ' / ส่วนประกอบ บริการเข้าสู่ระบบของฉันถูกฉีดเข้าไป และ บริการเข้าสู่ระบบจะกำหนดเหตุการณ์

@Output() loginSuccess = new EventEmitter<IAuthResponse>();

และหลังจากเข้าสู่ระบบบริการของฉันสำเร็จ บริการเข้าสู่ระบบก็จะเพิ่มกิจกรรม

this.loginSuccess.next(response);

ฉันสามารถตั้งค่าเบรกพอยต์ในองค์ประกอบของแอปบน LoginSucess ที่สมัครเป็นสมาชิกได้ และข้อมูลจะถูกส่งต่อไป อย่างไรก็ตาม 'สิ่งนี้' ไม่ได้ถูกกำหนดไว้

private loginSuccess(res: IAuthResponse) {
    this.auth = res;  //this is undefind
}

ฉันจะอัปเดตส่วนประกอบของแอปจากเหตุการณ์ที่ถูกทริกเกอร์จากบริการที่ใช้ในส่วนประกอบที่โฮสต์ในเต้ารับเราเตอร์ได้อย่างไร


angular angular2-routing angular2-services
person Dan Soltesz    schedule 12.05.2016    source แหล่งที่มา

คำตอบ (2)


arrow_upward
5
arrow_downward

ไม่แน่ใจว่าคุณหมายถึงอะไรโดย "และข้อมูลถูกส่งผ่าน"

@Output() loginSuccess = new EventEmitter<IAuthResponse>();

ในส่วนประกอบที่เพิ่มโดยเราเตอร์ (LoginComponent) ไม่ได้ทำอะไรเลย ไม่รองรับ @Input() และ @Output() ในส่วนประกอบที่กำหนดเส้นทาง

เพียงฉีด LoginService ไปยังองค์ประกอบที่กำหนดเส้นทางแล้วปล่อยเหตุการณ์โดยใช้สิ่งที่สังเกตได้ในองค์ประกอบการเข้าสู่ระบบ

@Injectable() 
export class LoginService {
  changes:BehaviorSubject = new BehaviorSubject(false);
}

export class LoginComponent {
  constructor(private loginService:LoginService) {}

  onLogin() {
    this.loginService.changes.next(true);
  }
}

export class NavComponent {
  constructor(private loginService:LoginService) {}

  onLogin() {
    this.loginService.changes.subscribe(status => this.isLoggedIn = status);
  }
}
person Günter Zöchbauer    schedule 12.05.2016
comment
ฉันฉีด LoginService ลงใน LoginComponent และ LoginService ได้กำหนด @output eventEmitter แล้ว เมื่อเหตุการณ์ถูกยกขึ้นจากบริการเข้าสู่ระบบ ส่วนประกอบของแอปจะได้รับเหตุการณ์พร้อมข้อมูล (IAuthResponse) แต่ 'สิ่งนี้' ในส่วนประกอบของแอปจะเป็นโมฆะ/ไม่ได้กำหนด - person Dan Soltesz; 12.05.2016
comment
ตกลง EventEmitter ควรใช้เฉพาะในส่วนประกอบเท่านั้น @Output() ในบริการไม่มีความหมาย คุณมี function() แทนที่จะเป็น ()=> ที่ใดก็ได้ในโค้ดของคุณหรือคุณส่งฟังก์ชันไปทุกที่หรือไม่? - person Günter Zöchbauer; 12.05.2016
comment
การเปลี่ยน @output() EventEmitter จากบริการของฉันเป็น SubjectBehavior ส่งผลให้มีพฤติกรรมที่ถูกต้องที่ฉันกำลังมองหา ขอบคุณสำหรับการชี้แจงว่าควรใช้แอตทริบิวต์เอาต์พุตเมื่อใด/ที่ไหน - person Dan Soltesz; 12.05.2016
comment
ยอดเยี่ยม! ตกลง ในที่สุด Behavior' part made the difference. EventEmitter` จะเป็น Subject (หากไม่มี Behavior และทีม Angular อาจเปลี่ยนการใช้งานเป็นสิ่งที่แตกต่างออกไปในที่สุด) ข้อแตกต่างคือ BehaviorSubject ปล่อยกิจกรรมสุดท้ายให้กับสมาชิกใหม่ทันที ในขณะที่สมาชิก Subject จะได้รับเฉพาะกิจกรรมที่ปล่อยออกมาหลังจากที่พวกเขาสมัครรับข้อมูลแล้ว - person Günter Zöchbauer; 12.05.2016

arrow_upward
0
arrow_downward

ดูเหมือนว่านี่อาจเป็นวิธีแก้ปัญหาของฉัน: การส่งเหตุการณ์จากลูกไปยังพาเรนต์ที่ใช้เราเตอร์เอาท์เล็ต แต่ดูเหมือนว่า RC1 ได้เปลี่ยนวิธีการทำงานของ BehaviorSubject โดยใช้วิธีการด้านบน:

changes:BehaviorSubject = new BehaviorSubject(false);

ให้ข้อผิดพลาดว่า BehaviorSubject ต้องการการประกาศประเภท ดังนั้นฉันจึงลองทั้งสองอย่าง

changes:BehaviorSubject<boolean> = new BehaviorSubject(false);
    as well as
changes:BehaviorSubject<any> = new BehaviorSubject(false);

และมันคอมไพล์ได้ดี แต่เมื่อรันแอพ มันให้ข้อผิดพลาดที่ไม่ใช่คำอธิบายของ:

zone.js:323 SyntaxError: Unexpected token <
Evaluating http://localhost:3000/node_modules/rxjs/index.js
Error loading http://localhost:3000/app/main.js
at SystemJSLoader.__exec
(http://localhost:3000/node_modules/systemjs/dist/system.src.js:1395:16)
at entry.execute

ฉันสมมติว่ามีบางอย่างเปลี่ยนไปกับ rxjs และ BehaviorSubject

person Shar    schedule 24.05.2016
comment
นั่นไม่เกี่ยวข้องกับ BehaviorSubject เอง ข้อความแสดงข้อผิดพลาดแรกคือการตั้งค่าบางอย่างเกี่ยวกับการตรวจสอบประเภทคงที่ (ฉันไม่ทราบรายละเอียดที่นี่เพราะฉันใช้ Dart เอง) ข้อความแสดงข้อผิดพลาดที่ 2 ยังเกี่ยวข้องกับการตั้งค่าโครงการของคุณด้วย โปรดอย่าเพิ่มคำถามติดตามผลเป็นคำตอบ แทนที่จะสร้างคำถามใหม่พร้อมลิงก์ไปยังคำถามที่คุณกำลังขยายต่อไป - person Günter Zöchbauer; 24.05.2016
comment
ฉันพบว่ามันคืออะไร พวกเขาจึงย้ายตำแหน่งของวัตถุพฤติกรรม ก่อนหน้านี้อยู่ภายใต้ rxjs/subject/BehaviorSubject ตอนนี้อยู่ใน rxjs/BehaviorSubject ซึ่งแก้ไขแล้ว นอกจากนี้ พวกเขา (Stackoverflow) ไม่อนุญาตให้ฉันเพิ่มความคิดเห็นในโพสต์อื่น ๆ เพราะฉันต้องการคะแนน 500 หรืออะไรทำนองนั้น แต่พวกเขาอนุญาตให้โพสต์คำตอบ...ไปคิดดู - person Shar; 24.05.2016