相关疑难解决方法(0)

为什么Singleton被认为是反模式?

可能重复:
单身人士有什么不好的?

单身人士设计模式:陷阱

单身反模式

我最近听说过Singleton是一种反模式.我知道它与事实有关,使得一个类单例就像使该唯一实例成为一个全局变量,但它也做了很多(限制该对象的实例数,管理实例化等等).

为什么Singleton被认为是反模式?还有什么选择?

design-patterns anti-patterns

71
推荐指数
4
解决办法
6万
查看次数

替代Angular 2.0中的$ scope

在Angular 2.0中,将没有$scope.

有什么替代方案?如何在组件之间共享数据?该scope选项是否可用于指令?更实际的是,有一种当前的替代品,我可以熟悉吗?

我知道,controller as但我读到控制器也将被淘汰.

Angular团队开始对这场革命感到困惑.

angularjs-scope angular

44
推荐指数
3
解决办法
5万
查看次数

在角度2(Beta)中将一项服务注入另一项服务的最佳方法是什么?

我知道如何将服务注入组件(通过@Component),但是如何使用DI来传递组件之外的服务?

换句话说,我不想这样做:

export class MyFirstSvc {

}

export class MySecondSvc {
    constructor() {
        this.helpfulService = new MyFirstSvc();
    }
}

export class MyThirdSvc {
    constructor() {
        this.helpfulService = new MyFirstSvc();
    }
}
Run Code Online (Sandbox Code Playgroud)

javascript angular

41
推荐指数
2
解决办法
4万
查看次数

以角度2在两个子组件之间进行通信

我在角度2中非常新.我在两个组件之间进行通信时遇到问题.当我有一个父项和一些子组件的布局时,可以很容易地使用@Input注释设置子组件的变量.

但是现在我有一个父组件的布局(主要用于布局)和两个子组件:

示例布局

子组件2有一堆按钮,只创建一个简单的消息.现在我想在子组件1中显示此消息.

我该如何解决?提前致谢

components angular

15
推荐指数
4
解决办法
1万
查看次数

Angular2中多步骤表单之间的交换数据:经验证的方法是什么?

我可以想象以下方法在多步骤表单之间交换数据:

1)为每个表单步骤创建一个组件,并通过@input,@ output输出组件之间的数据(例如,您不能从步骤5更改为2)

2)data在新路由器中使用新属性(参见此处)(例如,您无法从步骤5更改为2))

3)用于存储数据的共享服务(依赖注入)(组件交互)(例如,您可以从步骤5更改为2)

4)@ ngrx/store的新基础(还没有真正经验)

你能给出一些"获得经验值",你用了什么?为什么?

forms router multi-step data-exchange angular

13
推荐指数
2
解决办法
7175
查看次数

angular 等待方法完成或变量被初始化

我有一个用作本地数据存储的服务来跨应用程序共享数据。该服务在开始时会进行一些休息调用以初始化一些数据。它看起来像这样:

Injectable()
export class DataStoreService {
     leadList: LeadModel[]
     optyList: ContactModel[]

     constructor(public dataService:DataService){
         this.initializeData()
     }

     initializeData() {

         this.dataService.getObjectData('opportunities').subscribe(
             (data) =>  this.optyList = data
         )

         this.dataService.getObjectData('leads').subscribe(
             (data) =>  this.leadList = data
         )
     }
}
Run Code Online (Sandbox Code Playgroud)

我有一个组件页面,我在下面做:

ngOnInit() {
     for(let lead of this.dataStore.leadList){
             if(lead.accepted == false)
              this.newLeadsList.push(lead)
     }
}
Run Code Online (Sandbox Code Playgroud)

很明显,如果初始化数据没有完成,leadList 可能是未定义的,这个 ngOnInit for 循环也会崩溃。那么,如何在 ngOnInit 中等待 initializeData 完成?

javascript promise typescript angular

7
推荐指数
1
解决办法
1万
查看次数

如何将 ViewContainerRef 注入服务?

我正在尝试注入ViewContainerRef服务,但收到错误No provider for ViewContainerRef!。我找到了这个PR,它准确地解决了我所追求的问题,并且它似乎已被合并。

请注意,我知道如何通过使用 this 的占位符来实现这一点

angular

5
推荐指数
2
解决办法
6057
查看次数

Angular2:数据层的最佳实践

我是Angular2的新手,正在边做边学.现在,我已成功构建了一个包含父组件,多个子组件和数据库服务的多视图.现在我将要使用各自的父子组件来实现其他视图.

应用程序应该使用可以在其他组件中添加/更新/删除的相同数据集,因此我正在寻找一个单独的数据层,可以由应用程序的所有组件直接查询.更多 - 我需要相同的服务实例,以便中间数据随处可用,以及避免不必要的数据库访问.在Angular2中定义和使用这样一个类的最佳方法是什么?

更新问: 现在,当我可以直接访问整个应用程序中数据层的同一实例的变量时,处理组件中变量的最佳方法是什么?

a)我应该使用本地组件变量,它们是相同数据层变量的副本(因此显式加载,获取和设置它们),如

this.locations = this.datalayer.locations;
this.selectedLocation;

updateLocation(id) {
  this.selectedLocation = id;
  this.datalayer.setSelectedLocation(id);
}

getSelectedLocation() {
   return this.selectedLocation;
}
Run Code Online (Sandbox Code Playgroud)

或者b)我应该专门处理数据层变量,迭代它们,从组件中获取和设置它们吗?

updateLocation(id) {
   this.datalayer.selectedLocation = id;
}

getSelectedLocation() {
   return this.datalayer.selectedLocation;
}
Run Code Online (Sandbox Code Playgroud)

或者可能有一个选项c?

data-layers typescript angular2-routing angular2-services angular

5
推荐指数
1
解决办法
2297
查看次数

在Angular 2中传递非父/子关系组件之间的值

根据我的理解,在Angular 2中,如果要在不相关的组件之间传递值(即,不共享路由的组件,因此不共享父子关系),则通过共享服务执行此操作.

这就是我在Angular2应用程序中设置的内容.我正在检查一个url中是否存在一系列字符,如果存在则返回true.

  isRoomRoute(routeUrl) {
      if ((routeUrl.includes('staff') || routeUrl.includes('contractors'))) {
          console.log('This url: ' + routeUrl + ' is a roomRoute');
          return true;
      } else {
          console.log('This url: ' + routeUrl + ' is NOT a room route');
          return false;
      }
  }
Run Code Online (Sandbox Code Playgroud)

在根app.component的构造函数中,我正在订阅路由事件:

constructor(private routeService: RouteService,
            private router: Router)  {
    this.router.events.subscribe((route) => {
    let routeUrl = route.url;
    this.routeService.sendRoute(routeUrl);
    this.routeService.isRoomRoute(routeUrl);
    });
}
Run Code Online (Sandbox Code Playgroud)

...然后使用提供的URL来检查url是否包含特定字符串.每次路线更改时都会对此进行评估.

所以这一切都按预期工作.

但是,我在将该检查的结果传递给另一个不相关(非父子)组件时遇到了问题.

即使我在app.component和un-related(room.component)组件中使用共享服务(routeService),但在一个组件中工作的东西在另一个组件中不起作用.根据我的理解,这里检查的内容的"真实性"应该足以回复真实的陈述.

但是在次要的,不相关的组件中,当我调用函数时,我得到一个"未定义"错误,如下所示:

  isRoomRoute() {
       if (this.routeService.isRoomRoute(this.routeUrl)) {
           return true;
       }
     }
Run Code Online (Sandbox Code Playgroud)

所以这就是我被困住的地方.基本上,关于url是否包含某个字符串的评估已经发生.现在我只需要将该检查的布尔结果传递给辅助的非相关组件.我怎样才能在Angular 2中做到最好?

javascript typescript angular

5
推荐指数
1
解决办法
4408
查看次数

Angular2 - 使用服务的组件之间的交互

我有两个组件A和B,其中组件A包含一个按钮.我希望当用户点击此按钮时,在组件B上触发一个功能

<A></A>
<router-outlet></router-outlet>
Run Code Online (Sandbox Code Playgroud)

并且组件B使用routing进行渲染.我正在考虑使用具有可观察布尔值的服务,该服务指示是否单击了A中的按钮.这是实现它的正确方法吗?

typescript angular2-routing angular2-services angular

4
推荐指数
1
解决办法
5171
查看次数

从另一个组件调用组件中的函数

在 Angular2 中,假设我有 component1(将其用作左侧面板导航器)和 component2 。这两个组件彼此不相关(兄弟姐妹,父子关系,......)。如何从 component2 调用 component1 中的函数?我不能在这里使用事件绑定。

events components event-handling listener angular

4
推荐指数
2
解决办法
2万
查看次数

组件订阅不会看到具有Subject Observable调用next()的Angular Service

我想从Angular Service中检索更新的对象值(借用者).我Subject在服务中创建了一个RxJS ,以便多个组件可以订阅它并获得更新的值.

当我通过组件中提供的服务订阅Subject时,我发现onNext()即使.next()从BorrowerService 调用函数参数也不会被调用.

如果我在BorrowerService类中订阅,我发现它.next()按预期工作.似乎Subject是调用的Service类.next()和组件之间的不同实例,因此不会获得该订阅.

这是否无法理解Angular Services或Observables?如何在不知道何时调用的情况下更新服务中的值并被动地获取组件中的更改.next()

借款人-report.component.ts

@Component({
    ...
    providers:   [BorrowerService]
})
export class BorrowerReport {
    private borrower: Borrower;

    constructor(private borrowerService: BorrowerService) {
        this.borrowerService.borrowerChanged.subscribe(borrower => {this.borrower = borrower});
    }
}
Run Code Online (Sandbox Code Playgroud)

borrower.service.ts

@Injectable()
export class BorrowerService {
    public borrowerChanged: Subject<Borrower> = new Subject<Borrower>();

    //event handler
    selectBorrower(borrower: Borrower) {
        this.borrowerChanged.next(borrower);
    }
}
Run Code Online (Sandbox Code Playgroud)

rxjs subject-observer angular

4
推荐指数
1
解决办法
7251
查看次数