如何在react app中使用angular component
发布于 7 年前 作者 cheapsteak 3555 次浏览 来自 分享

https://medium.com/appifycanada/angular-components-in-react-2c929130f995 文章是英文不过代码snippet应该比较透露都是干啥的

主要是在 react app外 initialize angular module和宣布dependencies, 在componentDidMount中bootstrap angular.

然后教如何从ui-router拦截$state.go的指令

再是如何防止Angular对游览器地址做手脚

最后在componentWillUnmount中把一切清理干净

若有任何问题欢迎留言,或Tweet me @Cheapsteak!

4 回复

我只知道反过来用可以。 什么场景需要在React用ng Component? 很好奇

@flamingtop 软件从angular到react移植, 先是Angular围绕React,新的东西用React写,旧的东西逐渐抽空被React吃到,吃掉一定程度可以比较轻松的让React做根基,可是又有一些比较复杂的但也比较独立的angular部分,不想费时重写(或者想推迟重写的时间),可以这样在react里bootstrap angular, 不放弃这个部件的feature,也不重写,仍然可以继续migration. 不是所有类别项目都合适,若项目比较快就结束了不值得费这个事

@cheapsteak 想法是很好,但是这种情况感觉太边界。与其迁移不如重写,集中力量快速把实现换成React。虽然重写通常是要避免的,但这不是那种情况。

  1. 用React做基础搭好基础,用单独的repo
  2. 从angular项目里抽取出组件来,用React Component实现这些组件
  3. 测试
  4. 用React实现替代angular实现

快刀斩乱麻,以后就轻松了。

各有各的情况吧 如果已有项目够大够久,剩下的部件够独立, 更适合迁移专家Martin Fowler提倡的"勒颈无花果"式迁移 英文essay在这 - https://www.martinfowler.com/bliki/StranglerApplication.html 向澳洲的勒杀藤一样,从小至大,逐渐把寄主勒死

回到顶部