Question

我有一个带有用户对象的应用程序，其中存储了所有用户信息，并使用userService提供的observable进行更新。现在，我想知道使用该组件可观察的用户的最佳做法是什么？

我有一个带有日历组件（Calendar）的页面（TestPage）。日历使用用户对象，因为它必须知道它具有显示周视图或月视图。

选项1： 第一个选项是在TestPage中创建一个observable并为用户对象提供一个属性，然后在Calendar中，它将获得具有@input的用户。

TestPage打字稿文件：

export class TestPage {
    private user: User;
    private userSubscription: Subscription;

    constructor( private usersService: UsersService) {
        this.log('constructor');
        this.userSubscription = this.usersService.$currentUser.subscribe((user: User) => {
            this.log('$currentUser: user update', user);
            this.user = user;
        });
    }

    ngOnDestroy(): void {
        this.log('ngOnDestroy: unsubscribing userSubscription');
        this.userSubscription.unsubscribe();
    }
}

TestPage html：

<flex-calendar [user]="user"></flex-calendar>

日历：

export class Calendar {
    @Input() user: User; // Got the user from the TestPage
}

选项2： 在TestPage和日历中创建一个observable。此选项的优点是日历与页面的连接较少。

日历：

export class Calendar {
    private user: User;
    private userSubscription: Subscription;

    constructor( private usersService: UsersService) {
        this.log('constructor');
        this.userSubscription = this.usersService.$currentUser.subscribe((user: User) => {
            this.log('$currentUser: user update', user);
            this.user = user;
        });
    }

    ngOnDestroy(): void {
        this.log('ngOnDestroy: unsubscribing userSubscription');
        this.userSubscription.unsubscribe();
    }
}

有人可以解释最佳选择是什么以及为什么？

Answer 1

我已经习惯了几次成功的另一个选择是交出一个可以包含回调函数的配置类/对象。通过这种方式，您可以获得两全其美的效果;日历组件可以直接订阅服务，但仍然保持愚蠢。

它看起来像这样：

TestPage

----Template----
<flex-calendar [calendarCallback]="calendarCallback"></flex-calendar>

----TS----
export class TestPage implements OnInit {
    private calendarCallback: Function;
    private userSubscription: Subscription;

    constructor( private usersService: UsersService) {
        this.log('constructor');
    }

    ngOnInit(): void {
        this.calendarCallback = this.getUser.bind(this);
    }

    getUser(){
        let currentUser = new Subject<User>();
        this.usersService.$currentUser
            .subscribe(
                (user: User)=> {
                    this.log('$currentUser: user update', user);
                    currentUser.next(user);
                }
            );
        return currentUser.asObservable();
    }
}

日历的

----TS----
export class Calendar implements OnInit{
    private calendarCondition;
    @Input("calendarCallback") calendarCallback;

    getCalendarDependancy(){
        this.calendarCallback.subscribe(
            (result) => {
                this.calendarCondition = result;
            }
        )
    }
}

正如Chandermani所说，最好尽量保持组件的愚蠢。有了这个说法，这种方法的主要优点是日历组件不再依赖于父组件来提供订阅的结果，这在示例中并不是问题，但如果说的话可能会成为一个问题。在日历组件本身内触发查找（例如，单击时）。

此致

Answer 2

我认为第一个选项比第二个选项更好，因为第一个选项依赖关系是显式的，只有组件只依赖于输入模型。只要可以提供输入，日历组件就可以在任何地方使用。日历组件更像哑组件。

搜索智能和哑元组件模式，以便更好地了解如何为复杂的用户界面设计组件。

角度2分量的最佳实践

2 个答案: