angular 2 个组件的最佳实践

Question

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

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

选项 1： 第一个选项是在 TestPage 中创建一个可观察对象，并为用户对象提供属性，然后在日历中，它获得具有 @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();
    }
}

测试页面html：

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

日历：

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

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

日历：

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

我相信第一个选项比第二个选项更好，因为第一个选项的依赖关系是明确的，并且只有组件仅依赖于输入 model.As 只要可以提供输入，日历组件就可以在任何地方使用。日历组件更像是一个哑组件。

搜索聪明和愚蠢的组件模式，以更好地了解如何为复杂的UI设计组件。

Answer 2

我现在成功使用过几次的替代选项是提交一个可以包含回调函数的配置 class/object。通过这种方式，您可以两全其美； Calendar Component 可以直接订阅该服务，但仍然是哑巴。

看起来像这样：

测试页面

----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 所说，最好让组件尽可能地哑。话虽如此，这种方法的主要优点是日历组件不再依赖于父组件来提供订阅结果，这在目前的示例中不是问题，但如果说查找在日历组件本身内触发（例如单击）。

此致

angular 2 个组件的最佳实践

Best practice for angular 2 component

angular

angular2-observables