小编Dra*_*man的帖子

Angular:将组件传递给组件

我有这个小gridComponent:

@Component({
    selector: 'moving-grid',
    templateUrl: './grid.component.html',
    styleUrls: ['./grid.component.css']
})
  export class GridComponent {
     @Input('widgets') extComponents: Array<Component>;
  }
Run Code Online (Sandbox Code Playgroud)

还有第二个testComponent

@Component({
  selector: 'test',
  template: `
    <div #content>I say hello<li>i</li><li>u</li><button (click)="test()">click me</button> world</div>
  `
})

export class TestComponent {
  @ViewChild('content') content: HTMLElement;

  getContent() {
    return this.content;
  }
  test() {
    console.log("test");
  }
}
Run Code Online (Sandbox Code Playgroud)

现在我试图将testComponent的多个实例传递给gridComponent.因此我有第三个看起来像这个的组件:

template: `
        <moving-grid [widgets]="[z1,z2]"> 
          <test  class="grid-item-content-001" #z1></test>
          <test  class="grid-item-content-002" #z2></test>
        </moving-grid>
      `
Run Code Online (Sandbox Code Playgroud)

在此之前,一切都像预期的那样.但是如何从gridComponent中的@Input渲染组件?我的第一种方法是在testComponent中声明一个@ViewChild并使用getContent()函数返回它.但它不会起作用.我可以用某种方式使用ng-content指令,还是有更好的解决方案?

GridComponent看起来像这样.我想在其中一个黑框中显示@Input-Component的模板.可能吗?

移动网格组件

谢谢你的帮助

components nested input typescript angular

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

在 docker 容器内链接或安装本地 typescript 库

我仍在对我们的微前端应用程序进行 Docker 化。目前我们使用 React 和 Angular 以及共享库进行通信。该库是我们自己开发的,通过npm安装在本地。

'- angular-project
'- react-projects
'- shared-libs
   '- communication-lib
Run Code Online (Sandbox Code Playgroud)

我们正在本地安装通信库

npm install ..\shared-libs\communication-lib
Run Code Online (Sandbox Code Playgroud)

在本地运行一切工作正常。但当我们转向 docker 时,出现了几个问题,我无法找到一个好的解决方案。下面是 Angular 项目 Dockerfile 的前几行

FROM node:16-alpine As development
WORKDIR /usr/src/app/frontend
COPY ./angular/package.json ./angular/package-lock.json ./
RUN npm i
...
# already crashed here
Run Code Online (Sandbox Code Playgroud)

这就是 docker 失败的地方,因为 docker 镜像不知道该库。我还添加了一个卷来与该映像共享共享库的代码,但是我仍然存在没有已构建的node_module 的问题。

如果有人能为我提供一些如何解决此问题的有用提示,我真的很感激。

我的想法:

是否可以以某种方式为库创建一个独立的 docker 并在我的角度项目容器中使用这些容器?

我可以以某种方式复制/构建并链接容器内的库吗?

shared-libraries node-modules typescript docker angular

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

角度2:管道中的concat数组,不会丢失数据绑定

我有一个简单的管道:

export class MergePipe implements PipeTransform {
transform(first: any[], second: any[], order: Boolean): any {
    return order ? first.concat(second):second.concat(first);
}
Run Code Online (Sandbox Code Playgroud)

我在一个简单的按钮上使用它:<button *ngFor="let item of items | sort:suffix | filter:filterargs | merge:newItems:false"></button>.

然后使用newItems.push(values)将一些值推入newItems但没有任何反应.如果我从*ngFor中删除管道,我会收到预期的更改.

我想我很想知道数据绑定是如何工作的.

感谢您提供有用的信息.

data-binding concat pipe angular

2
推荐指数
1
解决办法
2704
查看次数