我有这个小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的模板.可能吗?
谢谢你的帮助
我仍在对我们的微前端应用程序进行 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 并在我的角度项目容器中使用这些容器?
我可以以某种方式复制/构建并链接容器内的库吗?
我有一个简单的管道:
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中删除管道,我会收到预期的更改.
我想我很想知道数据绑定是如何工作的.
感谢您提供有用的信息.
angular ×3
typescript ×2
components ×1
concat ×1
data-binding ×1
docker ×1
input ×1
nested ×1
node-modules ×1
pipe ×1