共计 678 个字符，预计需要花费 2 分钟才能阅读完成。
这次以前做的一个我的项目又双叒叕加辣新需要
自然而然又有了新问题
首先如下图所示，须要两个地图
左侧的是子组件中的地图，右侧的是父组件中的地图，子组件中传入了父组件的 this 对象。
在子组件中的 ngOnInit 生命周期钩子中初始化地图的话会呈现
或者地图曾经被初始化过的谬误，所以放在 ngAfterViewInit 中初始化就没有问题了
而后遇到的第一个问题就是，地图显示不全，如下图所示
能够看到地图只显示很小的一片区域，挪动的时候也不会扩充显示区域。这时候个别在正确的中央写上代码 this.map.invalidateSize(true) 就行了，官网文档里对这个办法的形容是
简而言之就是依据容器大小动静更新地图。之所以说个别状况下这样写就对了，因为还有其余的状况
第二种状况也会导致地图显示不全
就是 img 的款式问题，如下图
这里在父组件中定义了 map 的预设款式。
子组件中也同样，利用到了这个款式，我更改了 leaflet 中的 mark，标记用的不是点，用的是 img 图片代替，我在款式中应用了款式穿透 :host ::ng-deep .divlayer .divcontent img 就会造成下面的地图显示不全。解决办法就是更具体到 img 中为图标的那一类
也就是:host ::ng-deep .divlayer .divcontent img.leaflet-marker-icon 这样问题就解决了，大快人心
scss 和 less 在 angular 中应用的不同目前发现的一点就是
less 中能够应用:host /deep/ xxx{}不会报错，而在 scss 中 /deep/ 会报错，能够用::ng-deep 代替。