我是 Angular 的新手，所以我不会因为缺少基本的东西而感到惊讶。我尝试了 Angular 文档和谷歌搜索，但到目前为止不知道为什么我的组件在单击后只更新 UI？

我的场景是，我想要一个名为NotificationComponent的共享组件和一个名为NotificationService的共享服务。由于我可能会发生超过 1 个错误，因此我的NotificationComponent应该显示所有这些消息。最重要的是，我有一个 http 错误拦截器和一个自定义错误处理。

发生的情况是，我收到 3 个 https 错误，拦截器正在处理所有 3 个错误，自定义错误处理正在处理所有 3 个错误，通知服务正在创建所有 3 个错误，但通知组件仅自动呈现 1 个（有时是 2 个）错误。一旦我点击用户界面中的任意位置，就会出现提醒消息。为什么会发生这种情况？

层次结构：AppModule导入SharedModule[包含通知服务和组件]。通知组件选择器位于内部app.component.html

成分：

@Component({
  selector: 'app-notification',
  templateUrl: './notification.component.html',
  styleUrls: ['./notification.component.scss']
})
export class NotificationComponent implements OnInit, OnDestroy  {
  
  messages: Message[] = [];
  notificationSubscription: Subscription;

  constructor(private notificationService: NotificationService) { }

  ngOnInit() {
    this.notificationSubscription = this.notificationService.onNotify()
      .subscribe(msg => {
        this.messages.push(msg);
      });
  }

  ngOnDestroy() {
    // unsubscribe to …

问题更新链接。

问题

I\xe2\x80\x99m 尝试动态加载同一组件的多个实例，当用户提交表单时，新组件将添加/加载到屏幕上。其背后的想法是，用户可以提供表单的详细信息，然后将其显示在所创建的组件的特定实例上。

我最初的想法是拥有某种数据结构，例如键对值的数组或映射，这样当用户提交表单时，我可以将组件的新实例与表单数据一起添加到我的数据结构中。然后 Angular 可以以某种方式显示驻留在数据结构中的组件的每个实例，如下图所示：

需要注意的是，该表单实际上是它自己的独立组件，以模式对话框的形式存在。当按下绿色的“添加状态框”按钮时，将打开此表单对话框，然后用户可以提交表单并（希望）能够使用提交的表单提供的数据创建状态框组件的新实例。

然而这被证明是困难的，目前我\xe2\x80\x99m 在上面的屏幕截图中实现这一点的方法是仅在 app.component.html 中单独显示每个组件，它根本不是动态的，并且具有无用户控制：

<app-header></app-header>\n<div class=\'status-box-container\'>\n    <app-status-box></app-status-box> //component I\xe2\x80\x99m trying to display\n    <app-status-box></app-status-box> //component I\xe2\x80\x99m trying to display\n    <app-status-box></app-status-box> //component I\xe2\x80\x99m trying to display\n</div>\n

我尝试过的事情

我\xe2\x80\x99已经遵循了一些教程，但是所述教程的结果\xe2\x80\x99t完全不符合我\xe2\x80\x99m的要求，\xe2\x80\x99根本不起作用，或者它\xe2\x80\x99 对我来说太复杂了，无法理解。

首先，我尝试遵循Angular 网站上的官方指南，但这一次仅显示一个组件，并且每 3 秒动态更改其内容，而不是同时显示一个组件的多个实例。

接下来，我尝试从这个现有的堆栈溢出问题中跟踪这个 stackblitz，但我发现这不起作用并且非常复杂，其中大部分我不理解\xe2\x80\x99。尽管它\xe2\x80\x99s非常接近我\xe2\x80\x99m试图实现的目标。

最后，我尝试遵循我发现的 stackblitz，但它\xe2\x80\x99s 并不像我希望的那样动态，因为组件的每个实例都被硬编码到不同的变量中，我也无法让它工作。

观察结果

但我注意到的一件事是，所有三种方法都有两个共同点。首先在app.component.html中，他们使用<ng-container #messageContainer></ng-container>或<ng-template #messageContainer></ng-template>。据我了解，这是将动态组件加载到 …

我试图了解控制器的$onDestroy方法和$scope.$destroy()之间的区别。

定义表示，当需要销毁组件的包含范围时调用 $onDestroy。但是$scope.$destroy() 不是一样的情况吗？

根据我在https://plnkr.co/edit/9RlS8OLxAoyK80WPMJaN?p=preview创建的 plunker ，

<div ng-controller="ParentController">
    <button ng-click="func()">Parent</button>
    <br><br>
    <div ng-controller="ChildController">
      <button ng-click="childFunc()"> Child </button>
      <br><br>
      <comp> </comp>
    </div>
</div>

我注意到两种情况。

1. 当我从父控制器或子控制器调用 $destroy() 时，组件中会触发 $onDestroy 和 $scope.$on('$destroy') 事件。这是有道理的，因为当父作用域被销毁时，组件的包含作用域也会被销毁。但是，我仍然可以单击“Component FUNC”按钮并调用与其关联的函数。为什么会发生这种情况？

2. 当我从组件本身调用 $destroy() 时，只有 $scope.$on('destroy') 事件被触发，而 $onDestroy 未触发。此外，我无法像在案例 1 中那样访问“组件功能”按钮。

有人可以解释一下这两种情况的区别吗？

这不是现实生活中的用例，而是我想了解的东西。

谢谢你。

我正在使用angular 1.6,typescript,webpack,karma和jasmine编写应用程序.我能够为角度服务创建单元测试,但现在我遇到了测试组件的麻烦.在SO (1)和(2)以及网上我发现了不同的例子(像这样),但没有一个明确的指南解释如何用上述技术集测试角1组件.

我的组件(HeaderComponent.ts):

import {IWeatherforecast} from '../models/weather-forecast';
import WeatherSearchService from '../search/weather-search.service';
import WeatherMapperService from '../common/mapping/weatherMapper.service';


export default class HeaderComponent implements ng.IComponentOptions {
  public bindings: any;
  public controller: any;
  public controllerAs: string = 'vm';
  public templateUrl: string;
  public transclude: boolean = false;

constructor() {
    this.bindings = {
    };

    this.controller = HeaderComponentController;
    this.templateUrl = 'src/header/header.html';
    }
}

 export class HeaderComponentController {
   public searchText:string
   private weatherData : IWeatherforecast;

static $inject: Array<string> = ['weatherSearchService', 
                                 '$rootScope', 
                                 'weatherMapperService']; …

如何在我的角应用程序中实现侧边栏切换菜单.我对如何在其他组件中调用侧边栏菜单感到困惑.我的切换按钮位于标题组件上.当我单击标题组件上的切换按钮时,它的目的是显示侧边栏菜单.

header.component.html

  <div class="navbar-header"><a id="toggle-btn" href="#" class="menu-btn"><i class="icon-bars"> </i></a><a href="index.html" class="navbar-brand">
              <div class="brand-text"><span>MCDONALDS</span></div></a></div>

sidebar.component.html

<nav class="side">
  <h1>CLICK TO Show Me</h1>
  </nav>

core.component.html

<app-header></app-header>
<app-sidebar></app-sidebar>

免责声明：我刚刚发现我的问题几乎是该问题的重复：Angular在父对象上使用指令获取嵌套元素 问题本身并不相同，但是可接受的答案解决了我的问题

我的问题：我想使用@ViewChild访问子组件的属性“ .nativeElement”。在SO上已经讨论了这个问题，但是没有适合我的用例的解决方案。我将进一步参考其他问题。

这是父组件的html：

<h1>The Title</h1>

<some-child-component #wanted></some-child-component>

<some-other-component></some-other-component>

现在，我尝试像这样访问＃wanted-component：

@ViewChild('wanted') myWantedChild: ElementRef;

但是我在这里没有得到ElementRef，我将得到对SomeChildComponent-Instance的引用，就像在接受的答案中指出的那样： 如何在Angular4中访问组件的nativeElement？

我可以在Childcomponent本身中保留ElementRef，但可以将其注入构造函数中。但是我需要在父组件中使用ElementRef。

访问一个简单的div块的ElementRef很容易：

<div #wanted>something</div>

在这里，您可以通过@ ViewChild-Annotation直接获得ElementRef（在此处比较已接受的答案：在angular2中访问本机元素的正确方法是什么（2种差异方法）文档稀缺？

现在对我来说问题仍然存在：如何获取用作子组件的组件的ElementRef？我的确切用例是，我想获得子组件的高度（以像素为单位）。据我所知，我需要nativeElement-Reference。

编辑：

我可以将在子组件的构造函数中获得的ElementRef公开为公共属性。但这似乎有点...

我想基于Angular 4中的布尔值显示或隐藏模板.下面是HTML和代码

---这是在Home.Component.HTML中

<ng-template [ngIf]="isSummaryViewVisbile" #pricebookView ></ng-template>

----这是在HomeComponent中

   isSummaryViewVisbile: boolean = true;

上面的代码不起作用,它总是隐藏模板,虽然我指的是真的.

提前致谢.

我正在使用角度5.我的模块我正在使用传单1.2.0.

在leaflet.css中我遇到图像问题,例如,一些css行:

.leaflet-retina .leaflet-control-layers-toggle {
  background-image: url(/assets/images/leaflet/layers-2x.png);
  background-size: 26px 26px;
}

/* Default icon URLs */
.leaflet-default-icon-path {
  background-image: url(/assets/images/leaflet/marker-icon.png);
}

所以,我需要访问leaflet.css到它的相对路径,我尝试了:

@Component({
  selector: 'myComponent',
  template:`<div id="myId" class="myClass"></div>`,
   styleUrls: ['./myComponent.component.scss','/../../../../node_modules/leaflet/dist/leaflet.css'],
})

文件夹结构:

--project_folder
  --node_modules
     --leaflet
         --dist
           --leaflet.css
  --src
    --app
      --myComponentParent
        --myComponent
          --myComponent.component.ts
          --myComponent.component.scss
          --myComponent.component.html

我可以参考src中的文件夹吗？我该怎么做？

角（v5.2.10）小吃吧

-| 简介|-
我有一个Angular组件（我们称之为“父母”），它初始化了一个名为的Angular材质Snackbar snackBar。SnackbarMessage传入的是，另一个组件的模板包含快餐栏标记。snackBar.openFromComponent(SnackBarMessage)在这种情况下，使用是必要的，因为我不仅仅需要在小吃栏中使用纯文本（例如标记，单击事件等），snackBar.open(message, action)而这还不够。

-| 代码|-

“父项”组件：

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html'
})
export class Parent implements AfterViewInit {

  public constructor(public snackBar: MatSnackBar) { }

  public ngAfterViewInit(): void {
      this.snackBar.openFromComponent(SnackbarMessage);
  }

  public dismissSnackbar(): void {
    this.snackBar.dismiss();
  }
}

“ SnackbarMessage”组件：

@Component({
  selector: 'app-snackbar-message',
  templateUrl: './snackbar-message.html'
})
export class SnackbarMessage { }

“ snackbar-message.html”标记：

<p>(Snackbar message)</p>
<button type="button" (click)="dismissSnackbar();">Dismiss</button>

-| 问题|-
在导入的SnackbarMessage模板（snackbar-message.html）中，我需要调用Parent组件的dismissSnackbar();，我们如何使用此Angular应用程序的当前封装来做到这一点？

我有一个Angular 6应用，可以处理诸如“页面未找到”，“错误”，“未经授权”之类的路由。

这是我的路线的样子：

const appRoutes: Routes = [
  { path:'page-not-found', component: NotFoundPageComponent },
  { path: 'unauthorized', component: UnAuthorizedPageComponent },
  { path: 'error', component: ErrorPageComponent },
  { path: '**', component: NotFoundPageComponent },
  ];

所有组件都有简单的html模板，如下所示：

 <p>Page Not Found. Please report this error to system administrator </p>
 <p>Unauthorized. Please report this error to system administrator</p>
 <p>Error. Please report this error to system administrator</p>

一切工作正常，ng serve我想在多个应用程序中使用这些路由，因此我希望将其转换为可以在许多应用程序中导入的模块或库，如下所示

import { NotFoundPageComponent } from 'routing-lib';

在我的原始应用程序中，我使用创建了一个库ng g library routing-lib。但是我不怎么将我的应用程序绑定到库。这就是我的项目结构的样子。

有什么建议或指示吗？