[英]Angular 2 Dart: How to share variables between parent with router and child components?
How do I share variables if having a child component with a router and keep them updated through bindings? 如果让子组件与路由器一起使用并通过绑定更新它们,我如何共享变量?
This is (part of) my code: 这是我的代码(的一部分):
app_component.dart: app_component.dart:
import 'package:angular2/core.dart';
import 'package:angular2_components/angular2_components.dart';
import 'package:angular2/router.dart';
import 'package:my_app/profile_component/profile_component.dart';
import 'package:my_app/login_component/login_component.dart';
@Component(
selector: 'my-app',
styleUrls: const ['app_component.css'],
templateUrl: 'app_component.html',
directives: const [
ROUTER_DIRECTIVES,
materialDirectives,
LoginComponent,
ProfileComponent
],
providers: const [
ROUTER_PROVIDERS,
const Provider(LocationStrategy, useClass: HashLocationStrategy),
materialProviders
],
)
@RouteConfig(const [
const Route(path: 'home', name: 'Home', component: HomeComponent, useAsDefault: true),
const Route(path: 'profile', name: "User Profile", component: ProfileComponent)
])
class AppComponent {
@ViewChild('login')
LoginComponent loginComponent;
@ViewChild('profile')
ProfileComponent profileComponent;
bool get isUserLoggedIn => loginComponent.isUserLoggedIn;
}
app_component.html: app_component.html:
<nav>
<ul>
<li *ngIf="!isUserLoggedIn">
<a (click)="loginComponent.loginOpen=true">Account / Login</a>
</li>
<li *ngIf="isUserLoggedIn">
<a id="mb_logout" (click)="loginComponent.logUserOut()">Logout</a>
</li>
<li *ngIf="isUserLoggedIn">
<a id="mb_profile" [routerLink]="['User Profile']">Zum Profil</a>
</li>
</ul>
</nav>
login_component.dart: login_component.dart:
...
bool get isUserLoggedIn => _isUserLoggedIn();
...
profile_component.dart: profile_component.dart:
import 'package:angular2/core.dart';
import 'package:angular2_components/angular2_components.dart';
@Component(
selector: 'profile',
styleUrls: const ['profile_component.css'],
templateUrl: 'profile_component.html',
directives: const [materialDirectives],
providers: const [materialProviders],
)
class ProfileComponent {
@Input()
bool isUserLoggedIn;
ProfileComponent() {
print(isUserLoggedIn);
}
}
In short I want to access the current value of isUserLoggedIn from within ProfileComponent. 简而言之,我想从ProfileComponent中访问isUserLoggedIn的当前值。 How can I achieve this?
我怎样才能做到这一点?
On the parent component provide a shared service 在父组件上提供共享服务
@Injectable()
class SharedService {
bool _isUserLoggedIn = false;
bool get isUserLoggedIn => _isUserLoggedIn;
set isUserLoggedIn(bool value) {
_isUserLoggedIn = value ?? false;
_isUserLoggedInController.add(_isUserLoggedIn);
}
StreamController<bool> _isUserLoggedInController;
Stream<bool> get onIsUserLoggedIn => _isUserLoggedInController.stream;
SharedService() {
_isUserLoggedInController = new StreamController<bool>.broadcast(
onListen: () => _isUserLoggedInController.add(_isUserLoggedIn)
);
}
}
In components where you want to update use or update the status inject the service 在要更新的组件中,使用或更新状态注入服务
@Component(
...,
template: '''
<div>isLoggedIn: {{sharedService.onIsUserLoggedIn | async}}</div>
<button (click)="toggleIsUserLoggedIn()">{{(sharedService.onIsUserLoggedIn | async) ? 'log out' : 'log in'}}</div>
''',
)
class SomeComponent {
final SharedService sharedService;
SomeComponent(this.sharedService);
toggleIsUserLoggedIn() {
sharedService.isUserLoggedIn = !sharedService.isUserLoggedIn;
}
}
Provide the service in AppComponent
在
AppComponent
提供服务
@Component(
selector: 'my-app',
providers: const [SharedService],
)
class AppComponent {}
This is how I achieved this. 这就是我实现这一目标的方式。 Using a shared service.
使用共享服务。
In component where the model is being updated/used: 在更新/使用模型的组件中:
class myClassSend {
constructor(private sharedService: SharedService){
this.sharedService.userStatusUpdate(this.isUserLoggedIn); // We send isUserLoggedIn value to the shared service
}
}
Our shared service could be something like: 我们的共享服务可能是这样的:
export class SharedService {
userStatusUpdate$: Observable<any>;
private userStatusUpdateSubject = new Subject<any>();
constructor() {
this.userStatusUpdate$ = this.userStatusUpdateSubject.asObservable();
}
userStatusUpdate(userStatus) {
this.userStatusUpdateSubject.next(userStatus);
}
}
In component where we want to know the value of the model: 在我们想知道模型值的组件中:
class myClassReceive {
bool isUserLoggedIn;
constructor(private sharedService: SharedService){
this.sharedService.userStatusUpdate$.subscribe((userStatus) => {
this.isUserLoggedIn = userStatus; // And here we receive the isUserLoggedIn value!
}
);
}
Now, think that from myClassSend
you can send the information whenever you want: onInit, onChange, etc... And myClassReceive
will be "listening" all the time and will receive the value that you are sending as a parameter to the shared service. 现在,想想从
myClassSend
你可以随时发送信息:onInit,onChange等...而myClassReceive
将一直“监听”并将接收你作为参数发送给共享服务的值。
Think of the shared service as a cell phone that communicates 2 people (components), sending messages (parameters/data). 将共享服务视为可以通信2个人(组件),发送消息(参数/数据)的手机。
Here is Angular's documentation: https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service 这是Angular的文档: https ://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional- service
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.