在Angular 4.x中使用RxJS时,我看到了两种非常不同的模式,用于从用户启动的动作流中生成Observable。一个流是用户单击生成新对象的“添加项目”按钮的直接结果。另一个是由我正在使用的某些第三方代码发出的一系列事件。
我希望能够使用“ combineLatest”之类的东西来组合这两个流以生成单个Observable。
使用我的按钮,我遵循以下模式:
const signal = Observable.create(
(observer) => {
this.additem= (item) => observer.next(item);
}
);
this.item$ = signal.map((item) => [item])
.scan((accumulator, value) => {
return accumulator.concat(value);
});
Run Code Online (Sandbox Code Playgroud)
但是,我看到很多信息说我应该改用Subjects-我正尝试将其与事件回调一起使用,如下所示:
sort$ = new Subject();
sortChange(sort){
sort$.next(sort);
}
Run Code Online (Sandbox Code Playgroud)
然后,我尝试将这些合并如下:
combine$ = Observable.combineLatest(sort$, item$,
(sort, items) => {
return "something that does stuff with these";}
);
Run Code Online (Sandbox Code Playgroud)
我的问题是-“手动”生成流的首选模式是什么?是否可以/应该像我在这里尝试的那样将可观察对象和主题网格化为一个可观察对象?
我尝试将自定义 UI 与 aws Amplify 结合使用,但遇到了 Auth.completeNewPassword 问题。任何使用此方法的尝试都会引发错误Error in v-on handler: "TypeError: Cannot read property 'username' of null。
在此之前使用过给定的 UI,我知道当管理员创建 Cognito 用户时,他们会在首次登录时发送到“新密码”表单。但是,Amplify 文档中的示例一旦发现用户需要新密码,signIn 方法就会立即调用completeNewPassword 方法。
以下片段直接来自亚马逊的文档:
import { Auth } from 'aws-amplify';
Auth.signIn(username, password)
.then(user => {
if (user.challengeName === 'NEW_PASSWORD_REQUIRED') {
const { requiredAttributes } = user.challengeParam; // the array of required attributes, e.g ['email', 'phone_number']
Auth.completeNewPassword(
user, // the Cognito User Object
newPassword, // the new password
// OPTIONAL, the required attributes
{
email: 'xxxx@example.com',
phone_number: …Run Code Online (Sandbox Code Playgroud) authentication amazon-web-services vue.js amazon-cognito aws-amplify
我有两个组件A和B,其中组件A包含一个按钮.我希望当用户点击此按钮时,在组件B上触发一个功能
<A></A>
<router-outlet></router-outlet>
Run Code Online (Sandbox Code Playgroud)
并且组件B使用routing进行渲染.我正在考虑使用具有可观察布尔值的服务,该服务指示是否单击了A中的按钮.这是实现它的正确方法吗?
我的服务代码如下所示 -
DataService的
@Injectable()
export class DataService {
...
private serviceRequestDtoSource = new BehaviorSubject<ServiceRequestDto>(null);
serviceRequestDto$ = this.serviceRequestDtoSource.asObservable();
...
getAccountInfo(serviceRequestDto : ServiceRequestDto){
let body = JSON.stringify(serviceRequestDto);
let headers = new Headers({
'Content-Type': 'application/json'
});
let options = new RequestOptions({ headers: headers });
console.log("In data service.getAccountInfo");
this.http
.post(this.clientAccountInfoURL, body, options)
.map((response : Response) => { return <AccountDto[]> response.json().accountDtoList})
.do(data=> console.log('All :'+ JSON.stringify(data)))
.subscribe( response => {
this.accountList = response;
this.serviceRequestDto.accountDtoList = this.accountList;
this.serviceRequestDtoSource.next(serviceRequestDto);
},
error => this.errorMessage = <any>error);
}
Run Code Online (Sandbox Code Playgroud)
搜索组件(点击服务并订阅)如下所示 …
我能够通过模板绑定(在 ngInit 上)将数据从父级传递给子级。但是如何在父组件更新时共享相同的数据。是否可以在不涉及服务的情况下共享(从父组件到子组件)更新的数据?
我试过模板
<child-template *ngIf='data' [data]='data'></child-template>
但这仅传递数据 1 次。如果数据在父组件中更新怎么办?
我使用共享服务在两个独立组件之间传递数据。当我在共享服务中使用主题时,我无法在订阅组件的html中看到订阅的数据,但订阅后可以在控制台中看到它。而如果我使用Behaviorsubject,效果很好。谁能给我解释一下原因。
共享服务.ts:
//code with subject (not working)
private msgStatistics = new Subject<any>();
msgStatistics$ = this.msgStatistics.asObservable();
msgStats(message) {
this.msgStatistics.next(message)
}
//code with BehaviorSubject (working)
private msgStatistics = new BehaviorSubject<Object>(null);
msgStatistics$ = this.msgStatistics.asObservable();
msgStats(message) {
this.msgStatistics.next(message)
}
Run Code Online (Sandbox Code Playgroud)
组件2.ts:
this.shared_service.msgStatistics$.subscribe(res => {
this.message = res
console.log(this.message)
})
Run Code Online (Sandbox Code Playgroud)
上面的控制台在这两种情况下都会打印消息的值,但它不会以 html 形式呈现主题。